chore: export version

Author: shellscape

apps/preview/app/src/components/nav-button.tsx

@@ -14,18 +14,22 @@ interface NavButtonProps extends React.ComponentPropsWithoutRef<'header'> {
   label: string;
 }
 
+const variants = {
+  active: { opacity: 1 },
+  inactive: { opacity: 0 }
+};
+
 export const NavButton = ({ activeView, addClassNames, label }: NavButtonProps) => (
   <ToggleGroup.Item value={label}>
     <motion.div className={classnames(button, addClassNames)}>
-      {activeView === label && (
-        <motion.span
-          layoutId="topbar"
-          className={motionSpan}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-        />
-      )}
+      <motion.span
+        animate={activeView === label ? 'active' : 'inactive'}
+        initial={'inactive'}
+        variants={variants}
+        layoutId="topbar"
+        className={motionSpan}
+        exit={'inactive'}
+      />
       <span className={classnames(span, { 'text-cta-text': activeView === label })}>{label}</span>
     </motion.div>
   </ToggleGroup.Item>

apps/preview/app/src/components/nav.tsx

@@ -42,7 +42,7 @@ export const Nav = React.forwardRef<React.ElementRef<'header'>, Readonly<NavProp
             </div>
           )}
         </div>
-
+        {/* <div>activeView: {activeView}</div> */}
         {!!title && (
           <div className="flex flex-row items-center gap-4">
             <Popover.Root>

apps/preview/app/src/main.tsx

@@ -9,6 +9,12 @@ import { gather } from './templates';
 
 setup();
 
+// if (import.meta.hot) {
+//   import.meta.hot.accept((mod) => {
+//     console.log(mod);
+//   });
+// }
+
 const router = getRouter(await gather());
 const rootElement = document.getElementById('root');
 const root = ReactDOM.createRoot(rootElement);

apps/preview/app/src/routes.tsx

@@ -1,4 +1,4 @@
-import { createBrowserRouter, type RouteObject } from 'react-router-dom';
+import { createHashRouter, type RouteObject } from 'react-router-dom';
 
 import { Error } from './error.tsx';
 import { Home } from './home.tsx';
@@ -40,7 +40,7 @@ const getRoutes = (templates: TemplateData[]) => {
 
 export const getRouter = (templates: Record<string, TemplateData>) => {
   const { routes, templateParts } = getRoutes(Object.values(templates));
-  const router = createBrowserRouter([
+  const router = createHashRouter([
     {
       element: (
         <Layout>

apps/preview/app/src/templates.ts

@@ -1,46 +1,23 @@
-import { config } from './config.js';
 import { parseName } from './helpers';
-import type { TemplatePart, TemplateData } from './types.ts';
+import type { PreviewImportContent, TemplatePart, TemplateData } from './types.ts';
 
 export const gather = async () => {
-  const relativePath = config.relativePath.endsWith('/')
-    ? config.relativePath
-    : `${config.relativePath}/`;
-  const buildPath = config.buildPath.endsWith('/') ? config.buildPath : `${config.buildPath}/`;
-  const absBuildPath = `/${buildPath.replace(/(\.\.\/)+/, '')}`;
-
-  const htmlFiles = import.meta.glob(`@jsxemailbuild/**/*.html`, {
-    eager: true,
-    import: 'default',
-    query: '?raw'
-  });
-  const plainFiles = import.meta.glob(`@jsxemailbuild/**/*.txt`, {
-    eager: true,
-    import: 'default',
-    query: '?raw'
-  });
-  const sourceFiles = import.meta.glob(`@jsxemailsrc/**/*.{jsx,tsx}`, {
-    eager: true,
-    import: 'default',
-    query: '?raw'
+  const imports = import.meta.glob<PreviewImportContent>(`@jsxemailbuild/**/*.js`, {
+    import: 'default'
   });
-  // @ts-ignore
-  const { default: templateNameMap } = await import(`@jsxemailbuild/template-name-map.json`);
+  const builtFiles = await Promise.all(Object.values(imports).map((imp) => imp()));
+  const dirParts = builtFiles[0].sourceFile.split('/');
+  const baseDir = dirParts.length ? dirParts[0] : '';
+  const templateFiles: Record<string, TemplateData> = builtFiles.reduce((acc, file) => {
+    const templateName = file.templateName || file.sourceFile.split('/').at(-1);
 
-  const fileKeys = Object.keys(sourceFiles);
-  const templateFiles: Record<string, TemplateData> = fileKeys.reduce((acc, path) => {
-    const basePath = path.replace(relativePath, buildPath).replace(/\.(jsx|tsx)$/, '');
-    const absHtmlPath = `${path
-      .replace(relativePath, absBuildPath)
-      .replace(/\.(jsx|tsx)$/, '')}.html`;
-    const templateName = templateNameMap[absHtmlPath] || basePath.split('/').at(-1);
     return {
       ...acc,
-      [path]: {
-        html: htmlFiles[`${basePath}.html`],
-        path: path.replace(relativePath, ''),
-        plain: plainFiles[`${basePath}.txt`],
-        source: sourceFiles[path],
+      [file.sourceFile]: {
+        html: file.html,
+        path: file.sourceFile.replace(`${baseDir}/`, ''),
+        plain: file.plain,
+        source: file.source,
         templateName
       }
     };

apps/preview/app/src/types.ts

@@ -1,3 +1,12 @@
+// Note: This should match the same declaration in jsx-email/src/cli/preview.mts
+export interface PreviewImportContent {
+  html: string;
+  plain: string;
+  source: string;
+  sourceFile: string;
+  templateName: string;
+}
+
 export enum Views {
   Desktop = 'desktop',
   Html = 'html',

apps/preview/index.js

@@ -2,4 +2,4 @@ const pkg = require('./package.json');
 
 const getDeps = () => pkg.optimizeDeps;
 
-module.exports = { getDeps };
+module.exports = { getDeps, version: pkg.version };

apps/preview/package.json

@@ -28,24 +28,23 @@
   },
   "dependencies": {
     "@radix-ui/colors": "3.0.0",
-    "@radix-ui/react-collapsible": "1.1.0",
+    "@radix-ui/react-collapsible": "1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-popover": "1.1.1",
+    "@radix-ui/react-popover": "1.1.2",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-toggle-group": "1.1.0",
     "classnames": "2.5.1",
-    "framer-motion": "11.5.6",
+    "framer-motion": "11.12.0",
     "react-dom": "18.3.1",
-    "react-router-dom": "6.26.2",
+    "react-router-dom": "7.0.1",
     "shiki": "^1.18.0",
-    "tailwindcss": "3.4.0",
     "titleize": "^4.0.0",
     "vite": "^5.2.11"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
-    "tailwindcss": "3.4.13"
+    "tailwindcss": "3.4.15"
   }
 }