add metabar

Author: avivkeller

src/generators/web/components/MetaBar.jsx

@@ -1 +1,22 @@
-export default () => <div>MetaBar</div>;
+import MetaBar from '@node-core/ui-components/Containers/MetaBar';
+import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub.tsx';
+
+export default ({ headings, addedIn, readingTime, viewAs, editThisPage }) => {
+  return (
+    <MetaBar
+      heading="Table of Contents"
+      headings={{ items: headings }}
+      items={{
+        'Added In': addedIn,
+        'Reading Time': readingTime,
+        'View As': viewAs.map(([title, path]) => <a href={path}>{title}</a>),
+        Contribute: (
+          <>
+            <GitHubIcon className="fill-neutral-700 dark:fill-neutral-100" />
+            <a href={editThisPage}>Edit this page</a>
+          </>
+        ),
+      }}
+    />
+  );
+};

src/generators/web/constants.mjs

@@ -1,34 +1,5 @@
 import { fileURLToPath } from 'node:url';
 
-import tailwindcss from '@tailwindcss/postcss';
-import stylePlugin from 'esbuild-style-plugin';
-import postcssCalc from 'postcss-calc';
-
-import uiResolver from './utils/esbuild-plugin.mjs';
-/**
- * @type {import('esbuild').BuildOptions}
- */
-export const ESBUILD_CONFIG = {
-  bundle: true,
-  minify: false,
-  format: 'iife',
-  target: 'es2020',
-  platform: 'browser',
-  jsx: 'automatic',
-  write: false,
-  // This file is never created due to `write: false`, but we need
-  // to specify it for ESBuild.
-  outfile: 'output.js',
-  plugins: [
-    stylePlugin({
-      postcss: {
-        plugins: [tailwindcss(), postcssCalc()],
-      },
-    }),
-    uiResolver,
-  ],
-};
-
 export const ESBUILD_RESOLVE_DIR = fileURLToPath(
   new URL('./components', import.meta.url)
 );

src/generators/web/index.mjs

@@ -5,7 +5,7 @@ import { generate } from '@babel/generator';
 import Mustache from 'mustache';
 
 import buildProgram from './utils/buildProgram.mjs';
-import { bundle } from './utils/bundle.mjs';
+import bundleCode from './utils/bundleCode.mjs';
 
 /**
  * This generator generates a JavaScript / HTML / CSS bundle from the input JSX AST
@@ -39,7 +39,7 @@ export default {
       entries.map(async entry => {
         const program = buildProgram(entry);
         const { code } = generate(program);
-        const bundled = await bundle(code);
+        const bundled = await bundleCode(code);
 
         // All bundles share the same CSS
         if (!css) {

src/generators/web/utils/buildProgram.mjs

@@ -30,6 +30,7 @@ const buildProgram = entry =>
     ...Object.values(JSX_IMPORTS).map(({ name, source }) =>
       getImport(name, source)
     ),
+    // ReactDOM.createRoot(document.getElementById("root")).render([ our AST ])
     t.expressionStatement(
       t.callExpression(
         t.memberExpression(

src/generators/web/utils/bundle.mjs

@@ -0,0 +1,79 @@
+import { existsSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+
+import tailwindcss from '@tailwindcss/postcss';
+import esbuild from 'esbuild';
+import stylePlugin from 'esbuild-style-plugin';
+import postcssCalc from 'postcss-calc';
+
+import { ESBUILD_RESOLVE_DIR } from '../constants.mjs';
+
+const uiComponentsResolver = {
+  name: 'ui-components-resolver',
+  /**
+   * This plugin intercepts imports starting with '@node-core/ui-components' or '#ui/' and resolves them
+   * to the corresponding index.tsx file in the node_modules directory. If the index.tsx file
+   * doesn't exist, the resolution falls back to the default behavior.
+   * @param {import('esbuild').PluginBuild} build
+   */
+  setup(build) {
+    build.onResolve({ filter: /^(@node-core\/ui-components|#ui\/)/ }, args => {
+      // Skip if path already has file extension
+      if (/\.[a-zA-Z0-9]+$/.test(args.path)) {
+        return undefined;
+      }
+
+      // Normalize #ui/ prefix to @node-core/ui-components/
+      const normalizedPath = args.path.replace(
+        /^#ui\//,
+        '@node-core/ui-components/'
+      );
+
+      // Resolve to index.tsx file
+      const indexPath = fileURLToPath(
+        import.meta.resolve(`${normalizedPath}/index.tsx`)
+      );
+
+      return existsSync(indexPath) ? { path: indexPath } : undefined;
+    });
+  },
+};
+
+/**
+ * Bundles JavaScript code and returns JS/CSS content
+ * @param {string} code - Source code to bundle
+ * @returns {Promise<{js: string, css: string}>}
+ */
+export default async code => {
+  const result = await esbuild.build({
+    stdin: {
+      contents: code,
+      resolveDir: ESBUILD_RESOLVE_DIR,
+    },
+    bundle: true,
+    minify: true,
+    format: 'iife',
+    target: 'es2020',
+    platform: 'browser',
+    jsx: 'automatic',
+    write: false,
+    // This output file is a pseudo-file. It's never written to (`write: false`),
+    // but it gives ESLint a basename for the output.
+    outfile: 'output.js',
+    plugins: [
+      stylePlugin({
+        postcss: {
+          plugins: [tailwindcss(), postcssCalc()],
+        },
+      }),
+      uiComponentsResolver,
+    ],
+  });
+
+  const [jsFile, cssFile] = result.outputFiles;
+
+  return {
+    js: jsFile.text,
+    css: cssFile.text,
+  };
+};