buner 0.0.2 → 1.0.0

package/xpack/alias.ts

@@ -0,0 +1,21 @@
+import path from 'path';
+
+import { root, srcRoot } from './paths';
+
+const alias = [
+  { find: '@atoms', replacement: path.resolve(srcRoot, 'atoms') },
+  { find: '@molecules', replacement: path.resolve(srcRoot, 'molecules') },
+  { find: '@organisms', replacement: path.resolve(srcRoot, 'organisms') },
+  { find: '@templates', replacement: path.resolve(srcRoot, 'templates') },
+  { find: '@pages', replacement: path.resolve(srcRoot, 'pages') },
+  { find: '@assets', replacement: path.resolve(srcRoot, 'assets') },
+  { find: '@helpers', replacement: path.resolve(srcRoot, '_helpers') },
+  { find: '@data', replacement: path.resolve(srcRoot, '_data') },
+  { find: '@_types', replacement: path.resolve(srcRoot, '_types') },
+  { find: '@_http', replacement: path.resolve(srcRoot, '_http') },
+  { find: '@_api', replacement: path.resolve(srcRoot, '_api') },
+  { find: '@mocks', replacement: path.resolve(srcRoot, 'mocks') },
+  { find: '@xpack', replacement: path.resolve(root, 'xpack') },
+];
+
+export default alias;

package/xpack/config.ts

@@ -0,0 +1,59 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+import alias from './alias';
+import { getAssetFileName, getChunkFileName, getEntryFileName } from './filename';
+import { getManualChunk } from './manual-chunk';
+import { outDir, xpackEnv } from './paths';
+import buildStart from './hooks/build-start';
+import writeBundle from './hooks/write-bundle';
+import closeBundle from './hooks/close-bundle';
+import resolveDynamicImport from './hooks/resolve-dynamic-import';
+import handleHotUpdate from './hooks/handle-hot-update';
+import transformIndexHtml from './hooks/transform-index-html';
+import options from './hooks/options';
+import transfrom from './hooks/transform';
+
+// console.log('config');
+
+const config = defineConfig({
+  base: xpackEnv.VITE_BASE_URL,
+  plugins: [
+    react(),
+    options(),
+    buildStart(),
+    transfrom(),
+    transformIndexHtml(xpackEnv.VITE_BASE_URL),
+    resolveDynamicImport(),
+    handleHotUpdate(),
+    writeBundle(),
+    closeBundle(),
+  ],
+  assetsInclude: ['**/*.svg', '**/*.htm', '**/*.cshtml'],
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: getEntryFileName,
+        chunkFileNames: getChunkFileName,
+        assetFileNames: getAssetFileName,
+        manualChunks: getManualChunk,
+      },
+    },
+    minify: 'esbuild',
+    sourcemap: true,
+    outDir,
+    emptyOutDir: true,
+  },
+
+  css: {
+    preprocessorOptions: {
+      scss: {},
+    },
+  },
+
+  resolve: {
+    alias: alias,
+  },
+});
+
+export default config;

package/xpack/create-server.ts

@@ -0,0 +1,68 @@
+/* eslint-disable no-console */
+import fs from 'node:fs';
+import path from 'node:path';
+
+import express from 'express';
+import serveStatic from 'serve-static';
+import { ViteDevServer, loadEnv } from 'vite';
+import chalk from 'chalk';
+
+import { createViteDevServer } from './create-vite-dev-server.js';
+import { _useRenderer } from './renderer.js';
+
+interface Props {
+  root: string;
+  isTest: boolean;
+  port: number;
+  hmrPort?: number;
+  baseUrl?: string;
+}
+
+const argvModeIndex = process.argv.indexOf('--mode');
+const mode =
+  argvModeIndex >= 0 && argvModeIndex < process.argv.length - 1 && !process.argv[argvModeIndex + 1].startsWith('-')
+    ? process.argv[argvModeIndex + 1]
+    : 'production';
+
+process.env.MY_CUSTOM_SECRET = 'API_KEY_4c2928b5a14b475d94c3579cbea06178';
+const isProd = process.env.NODE_ENV === 'production';
+
+const createServer = async ({ root, hmrPort, baseUrl, isTest }: Props) => {
+  const resolve = (p: string) => path.join(root, p);
+
+  const indexProd = isProd ? fs.readFileSync(resolve('index.html'), 'utf-8') : '';
+
+  const app = express();
+
+  let viteDevServer: ViteDevServer | undefined;
+
+  if (!isProd) {
+    viteDevServer = await createViteDevServer({ root, baseUrl, hmrPort, isTest });
+    // use vite's connect instance as middleware
+    app.use(viteDevServer.middlewares);
+  }
+
+  app.use('/assets/images', serveStatic(resolve('public/assets/images'), { index: false }));
+  app.use('/assets/fonts', serveStatic(resolve('public/assets/fonts'), { index: false }));
+  app.use('/assets/css', serveStatic(resolve('public/assets/css'), { index: false }));
+  app.use('/assets/js', serveStatic(resolve('public/assets/js'), { index: false }));
+  app.use('/assets/vendors', serveStatic(resolve('public/assets/vendors'), { index: false }));
+  app.use('/assets', serveStatic(resolve('dist/assets'), { index: false }));
+  app.use('/samples', serveStatic(resolve('public/samples'), { index: false }));
+
+  _useRenderer({ app, indexProd, isProd, viteDevServer, resolve });
+
+  return { app, viteDevServer };
+};
+
+const startServer = (props: Props) => {
+  createServer(props).then(({ app }) => {
+    app.listen(props.port, () => {
+      const xpackEnv = loadEnv(mode, props.root);
+
+      console.log('Running on ' + chalk.green('http://localhost:' + props.port + xpackEnv.VITE_BASE_URL));
+    });
+  });
+};
+
+export { startServer };

package/xpack/create-vite-dev-server.ts

@@ -0,0 +1,33 @@
+import { ViteDevServer, createServer } from 'vite';
+
+interface Props {
+  root: string;
+  baseUrl?: string;
+  isTest: boolean;
+  hmrPort?: number;
+}
+
+const createViteDevServer = ({ root, baseUrl, hmrPort, isTest }: Props): Promise<ViteDevServer> => {
+  const server = createServer({
+    root,
+    base: baseUrl,
+    logLevel: isTest ? 'error' : 'info',
+    server: {
+      middlewareMode: true,
+      watch: {
+        // During tests we edit the files too fast and sometimes chokidar
+        // misses change events, so enforce polling for consistency
+        usePolling: true,
+        interval: 200,
+      },
+      hmr: {
+        port: hmrPort,
+      },
+    },
+    appType: 'custom',
+  });
+
+  return server;
+};
+
+export { createViteDevServer };

package/xpack/deploy/deploy-inte.ts

@@ -0,0 +1,3 @@
+const deployInte = () => {};
+
+export { deployInte };

package/xpack/filename.ts

@@ -0,0 +1,43 @@
+import _ from 'lodash';
+import { PreRenderedAsset, PreRenderedChunk } from 'rollup';
+
+// console.log('filename');
+
+interface AssetPathInfo {
+  name?: string;
+  ext: string;
+  noHash?: boolean;
+}
+
+const getAssetPath = ({ name, ext, noHash }: AssetPathInfo) => {
+  const normalizedName = _.lowerCase(name).replaceAll(/(\s+)/gi, '-');
+
+  if (noHash) {
+    return `assets/js/${normalizedName}.${ext}`;
+  }
+
+  return `assets/js/${normalizedName}.0x[hash].${ext}`;
+};
+
+export const getAssetFileName = (chunkInfo: PreRenderedAsset): string => {
+  // console.log('asset:', chunkInfo.name);
+  return getAssetPath({ name: chunkInfo.name, ext: 'css' });
+};
+
+export const getEntryFileName = (chunkInfo: PreRenderedChunk): string => {
+  // console.log('entry:', chunkInfo.name);
+  if (chunkInfo.name === 'entry-server') {
+    return chunkInfo.name + '.js';
+  }
+
+  if (chunkInfo.name === 'index') {
+    return 'assets/js/react-loader.0x[hash].js';
+  }
+
+  return getAssetPath({ name: chunkInfo.name, ext: 'js', noHash: true });
+};
+
+export const getChunkFileName = (chunkInfo: PreRenderedChunk): string => {
+  // console.log('chunk:', chunkInfo.name);
+  return getAssetPath({ name: chunkInfo.name, ext: 'js' });
+};

package/xpack/hooks/build-start.ts

@@ -0,0 +1,17 @@
+import { NormalizedInputOptions } from 'rollup';
+import { PluginOption } from 'vite';
+
+const buildStart = (): PluginOption => {
+  // console.log('[INIT] buildStart');
+
+  return {
+    name: 'xpack-build-start',
+    enforce: 'pre',
+
+    buildStart(_options: NormalizedInputOptions) {
+      // console.log('buildStart');
+    },
+  };
+};
+
+export default buildStart;

package/xpack/hooks/close-bundle.ts

@@ -0,0 +1,19 @@
+import { PluginOption } from 'vite';
+
+import { deployInte } from '../deploy/deploy-inte';
+
+const closeBundle = (): PluginOption => {
+  // console.log('[INIT] closeBundle');
+
+  return {
+    name: 'xpack-close-bundle',
+    enforce: 'post',
+
+    closeBundle() {
+      // console.log('closeBundle');
+      deployInte();
+    },
+  };
+};
+
+export default closeBundle;

package/xpack/hooks/handle-hot-update.ts

@@ -0,0 +1,22 @@
+import { PluginOption } from 'vite';
+
+const handleHotUpdate = (): PluginOption => {
+  // console.log('[INIT] handleHotUpdate');
+
+  return {
+    name: 'xpack-hot-update',
+    enforce: 'post',
+
+    handleHotUpdate({ file, server }) {
+      // console.log('handleHotUpdate');
+
+      if (file.endsWith('.js') || file.endsWith('.css') || file.endsWith('.json'))
+        server.ws.send({
+          type: 'full-reload',
+          path: '*',
+        });
+    },
+  };
+};
+
+export default handleHotUpdate;

package/xpack/hooks/options.ts

@@ -0,0 +1,55 @@
+import path from 'path';
+
+import { glob } from 'glob';
+import { PluginOption } from 'vite';
+
+import { root, mode } from '../paths';
+const scriptOnly = process.env.scriptOnly;
+
+const options = (): PluginOption => {
+  // console.log('[INIT] options');
+
+  const getSiteInputs = () => {
+    const inputs: { [name: string]: string } = {};
+
+    if (!scriptOnly) {
+      inputs['index'] = `${root}/index.html`;
+    }
+
+    const filePaths = glob.sync(['/src/assets/**/*.entry.ts', '/xpack/scripts/**/*.entry.ts'], { root: root });
+
+    [].forEach.call(filePaths, (filePath: string) => {
+      const fileName = path.basename(filePath).toLowerCase();
+      const entryName = fileName.replace(/\.entry\.ts$/gi, '');
+
+      if (entryName === 'mock-api' && mode === 'production') {
+        return;
+      }
+
+      if (entryName != fileName) {
+        inputs[entryName] = filePath;
+
+        return;
+      }
+    });
+
+    return inputs;
+  };
+
+  return {
+    name: 'xpack-options',
+    enforce: 'pre',
+
+    options(options) {
+      // console.log('options');
+
+      if (typeof options.input === 'string' && options.input.includes('entry-server')) {
+        return options;
+      }
+
+      options.input = getSiteInputs();
+    },
+  };
+};
+
+export default options;

package/xpack/hooks/resolve-dynamic-import.ts

@@ -0,0 +1,18 @@
+import { AcornNode } from 'rollup';
+import { PluginOption } from 'vite';
+
+const resolveDynamicImport = (): PluginOption => {
+  // console.log('[INIT] resolveDynamicImport');
+
+  return {
+    name: 'xpack-transform',
+    enforce: 'post',
+
+    resolveDynamicImport(_specifier: string | AcornNode, _importer: string) {
+      // console.log('resolveDynamicImport');
+      // console.log(_specifier, _importer);
+    },
+  };
+};
+
+export default resolveDynamicImport;

package/xpack/hooks/transform-index-html.ts

@@ -0,0 +1,18 @@
+import { PluginOption } from 'vite';
+
+const transformIndexHtml = (baseUrl: string): PluginOption => {
+  // console.log('[INIT] transformIndexHtml');
+
+  return {
+    name: 'xpack-transform-index-html',
+    enforce: 'post',
+
+    transformIndexHtml(html) {
+      // console.log('transformIndexHtml');
+
+      return html.replaceAll('#__BASE_URL__/', baseUrl);
+    },
+  };
+};
+
+export default transformIndexHtml;

package/xpack/hooks/transform.ts

@@ -0,0 +1,72 @@
+import path from 'path';
+import fs from 'fs';
+import crypto from 'node:crypto';
+
+import MagicString, { SourceMapOptions } from 'magic-string';
+import { PluginOption } from 'vite';
+
+import { root, xpackEnv } from '../paths';
+
+const transfrom = (): PluginOption => {
+  // console.log('[INIT] transform');
+  const hashes: { [key: string]: string } = {};
+
+  const getHash = (content: Buffer | string) => {
+    const sha1Hash = crypto.createHash('sha1');
+
+    sha1Hash.update(content);
+
+    return sha1Hash.digest('base64url').substring(0, 10);
+  };
+
+  return {
+    name: 'xpack-transform',
+    enforce: 'post',
+
+    transform(code, id, _options?) {
+      // console.log('transform');
+
+      const magicString = new MagicString(code);
+
+      magicString.replaceAll('VITE_EXTENSION_UNIQUE_ID', xpackEnv.VITE_EXTENSION_UNIQUE_ID).replaceAll(/\/assets\/[a-z0-9./_-]+\.svg\b\??/gi, (s) => {
+        if (s.includes('?')) {
+          // If the path already has a query string, return the original path
+          return s;
+        }
+
+        if (hashes[s]) {
+          // If the hash is already calculated, return the hash
+          return s + '?v=' + hashes[s];
+        }
+
+        const svgPath = path.resolve(root, 'public' + s);
+
+        if (fs.existsSync(svgPath)) {
+          // If the file exists, calculate the hash and return the hash
+          const content = fs.readFileSync(svgPath);
+          const hash = getHash(content);
+
+          hashes[s] = hash;
+
+          return s + '?v=' + hash;
+        }
+
+        // If the file does not exist, return the original path
+        return s;
+      });
+
+      const sourcemapOptions: SourceMapOptions = { source: id, file: id + '.map', includeContent: false, hires: true };
+      const newCode = magicString.toString();
+      const map = magicString.generateMap(sourcemapOptions);
+
+      return newCode !== code
+        ? {
+            code: newCode,
+            map,
+          }
+        : undefined;
+    },
+  };
+};
+
+export default transfrom;

package/xpack/hooks/write-bundle.ts

@@ -0,0 +1,16 @@
+import { PluginOption } from 'vite';
+
+const writeBundle = (): PluginOption => {
+  // console.log('[INIT] writeBundle');
+
+  return {
+    name: 'xpack-write-bundle',
+    enforce: 'post',
+
+    writeBundle(/* options: NormalizedOutputOptions, bundle: OutputBundle */) {
+      // console.log('writeBundle');
+    },
+  };
+};
+
+export default writeBundle;

package/xpack/manual-chunk.ts

@@ -0,0 +1,56 @@
+import path from 'path';
+
+import { ManualChunkMeta } from 'rollup';
+import slash from 'slash';
+
+import { getAbsolutePath, srcRoot } from './paths';
+
+// console.log('manual-chunk');
+
+const getInternalName = (id: string, api: ManualChunkMeta): string | null | void => {
+  const moduleInfo = api.getModuleInfo(id);
+
+  if (!moduleInfo?.isEntry) {
+    return;
+  }
+
+  const entryPath = getAbsolutePath(id);
+
+  if (entryPath.startsWith(srcRoot)) {
+    const relativePath = slash(path.relative(srcRoot, entryPath));
+    const match = /^([a-z0-9.@_-]+?)\/([a-z0-9.@_-]+?)(\.[^\.]+)$/gi.exec(relativePath);
+
+    if (match) {
+      return match[1] + '~' + match[2];
+    }
+  }
+};
+
+const getExternalName = (_: string): string | null | void => {
+  // const name = id
+  //   .toString()
+  //   .split('node_modules/')[1]
+  //   .split('/')[0]
+  //   .toString();
+  // if (name === 'react') {
+  //   return "react";
+  // }
+  // if (name === 'react-dom') {
+  //   return "react-dom";
+  // }
+  // if (id.includes("@aws-amplify")) {
+  //   return "vendor_aws";
+  // }
+  // else if (id.includes("@material-ui")) {
+  //   return "vendor_mui";
+  // }
+  // return 'vendor'; // all other package goes here
+};
+
+export const getManualChunk = (id: string, api: ManualChunkMeta): string | null | void => {
+  if (id.includes('node_modules/')) {
+    return getExternalName(id);
+  } else {
+    return getInternalName(id, api);
+  }
+};

package/xpack/paths.ts

@@ -0,0 +1,30 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import slash from 'slash';
+import { loadEnv } from 'vite';
+
+const argvModeIndex = process.argv.indexOf('--mode');
+const mode =
+  argvModeIndex >= 0 && argvModeIndex < process.argv.length - 1 && !process.argv[argvModeIndex + 1].startsWith('-')
+    ? process.argv[argvModeIndex + 1]
+    : 'production';
+
+// Consumer project root — where buner commands are run
+export const root = slash(process.cwd());
+
+// Package install location — where buner's own files live
+export const packageRoot = slash(path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..'));
+
+export const xpackEnv = loadEnv(mode, root);
+
+export const srcRoot = slash(path.resolve(root, 'src'));
+export const typesRoot = slash(path.resolve(srcRoot, '_types'));
+export const viteSharedRoot = slash(path.resolve(root, 'xpack/shared'));
+export const outDir = slash(path.resolve(root, 'dist'));
+
+export const getAbsolutePath = (p: string) => {
+  return path.isAbsolute(p) ? slash(p) : slash(path.resolve(root, p));
+};
+
+export { mode };