buner 0.0.2 → 1.0.0

package/xpack/renderer.ts

@@ -0,0 +1,141 @@
+/* eslint-disable no-console */
+import fs from 'fs';
+import path from 'path';
+
+import { Express } from 'express';
+import { ViteDevServer } from 'vite';
+import * as cheerio from 'cheerio';
+import jsBeautify, { CSSBeautifyOptions, HTMLBeautifyOptions, JSBeautifyOptions } from 'js-beautify';
+
+interface Props {
+  app: Express;
+  indexProd: string;
+  isProd: boolean;
+  viteDevServer: ViteDevServer | undefined;
+  resolve: (path: string) => string;
+}
+
+const beautifyOptions: HTMLBeautifyOptions | JSBeautifyOptions | CSSBeautifyOptions = {
+  indent_size: 2,
+  indent_char: ' ',
+  keep_array_indentation: false,
+  break_chained_methods: false,
+  indent_scripts: 'normal',
+  brace_style: 'expand',
+  space_before_conditional: true,
+  unescape_strings: false,
+  jslint_happy: false,
+  end_with_newline: false,
+  wrap_line_length: 0,
+  indent_inner_html: false,
+  comma_first: false,
+  e4x: false,
+  indent_empty_lines: false,
+  wrap_attributes: 'force',
+};
+
+const updateResourcePath = ($: cheerio.CheerioAPI, tagName: string, attr: string) => {
+  $(tagName).each((_, el) => {
+    const href = $(el).attr(attr);
+
+    if (href && href.startsWith('/')) {
+      let newPath = href;
+
+      if (process.env.VITE_DOMAIN) {
+        newPath = process.env.VITE_DOMAIN + newPath;
+      }
+
+      if (
+        href.startsWith('/') &&
+        !href.startsWith('/assets/vendors/') &&
+        ['.css', '.ico', '.js', '.webmanifest', '.svg'].includes(path.extname(href).toLowerCase()) &&
+        !/\.0x[a-z0-9]{8}\.\w+$/gi.test(href)
+      ) {
+        newPath += '?v=' + new Date().getTime();
+      }
+
+      if (newPath != href) {
+        $(el).attr(attr, newPath);
+      }
+    }
+  });
+};
+
+const removeDuplicateAssets = ($: cheerio.CheerioAPI, selector: string, attr: string, paths: string[]) => {
+  $(selector).each((_, el) => {
+    if ($(el).attr('data-pl-inplace') === 'true') {
+      return;
+    }
+
+    const path = $(el).attr(attr);
+
+    if (!path) {
+      return;
+    }
+
+    const index = $(el).index();
+    const parent = $(el).parent().clone();
+    const child = parent.children()[index];
+
+    parent.empty();
+    parent.append(child);
+    const html = parent.html();
+
+    $(el).after('\n<!-- ' + html + ' -->');
+
+    if (paths.includes(path)) {
+      $(el).remove();
+
+      return;
+    }
+
+    paths.push(path);
+    $('head').append(el);
+  });
+};
+
+export const _useRenderer = ({ app, indexProd, isProd, viteDevServer, resolve }: Props) => {
+  app.use(async (req, res) => {
+    try {
+      let template, render;
+
+      if (!isProd) {
+        // always read fresh template in dev
+        template = fs.readFileSync(resolve('index.html'), 'utf-8');
+        template = await viteDevServer!.transformIndexHtml(req.originalUrl, template);
+        render = (await viteDevServer!.ssrLoadModule(resolve('src/entry-server.tsx'))).render;
+      } else {
+        template = indexProd;
+        // @ts-ignore
+        render = (await import(resolve('dist/server/entry-server.js'))).render;
+      }
+
+      const context: { url?: string } = {};
+      const output = render(req.originalUrl);
+
+      if (context.url) {
+        // Somewhere a `<Redirect>` was rendered
+        return res.redirect(301, context.url);
+      }
+
+      const html = template.replace('<!--app-html-->', output.html);
+      const $ = cheerio.load(html);
+      const paths: string[] = [];
+
+      removeDuplicateAssets($, 'link[data-pl-require][href]', 'href', paths);
+      removeDuplicateAssets($, 'script[data-pl-require][src]', 'src', paths);
+      updateResourcePath($, 'link', 'href');
+      updateResourcePath($, 'script', 'src');
+      updateResourcePath($, 'img', 'src');
+
+      res
+        .status(200)
+        .set({ 'Content-Type': 'text/html' })
+        .end(jsBeautify.html_beautify($.html(), beautifyOptions).replace('/* app-styles */', output.styles));
+    } catch (e: any) {
+      !isProd && viteDevServer!.ssrFixStacktrace(e);
+      console.log(e.stack);
+      res.status(500).end(e.stack);
+    }
+  });
+};

package/xpack/root/active-item-options.tsx

@@ -0,0 +1,98 @@
+import { createRef, MouseEvent, useState } from 'react';
+import { viteAbsoluteUrl } from '@helpers/functions';
+
+import { useRootContext } from './root-context';
+import { useOnClickOutside } from './use-click-outside';
+import StateAnimationHtml from './state-animation-html';
+
+export default function ActiveItemOptions() {
+  const { activeItem, isTopPanel } = useRootContext();
+  const key = 'pl-show-state-selector';
+  const keyExist = localStorage.getItem(key);
+  const optionItemsRef = createRef<HTMLDivElement>();
+  const buttonRef = createRef<HTMLButtonElement>();
+
+  const [show, setShow] = useState(false);
+
+  useOnClickOutside(optionItemsRef, () => setShow(false), [buttonRef]);
+
+  const handleStateToggle = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (keyExist) {
+      localStorage.removeItem(key);
+    } else {
+      localStorage.setItem(key, 'true');
+    }
+
+    location.reload();
+
+    return false;
+  };
+
+  const handleThemeToggle = () => {
+    window.dispatchEvent(new CustomEvent('toggleTheme'));
+  };
+
+  const toggleCtaText = keyExist ? 'Hide state selector' : 'Show state selector';
+
+  const handleClick = () => {
+    setShow(!show);
+  };
+
+  const handleChangePanelPosition = () => {
+    const key = 'MSG_IS_TOP_PANEL';
+    const value = isTopPanel ? 'false' : 'true';
+
+    window.localStorage.setItem(key, value);
+    window.dispatchEvent(new StorageEvent('storage', { key, newValue: value }));
+
+    setShow(false);
+  };
+
+  return activeItem ? (
+    <div>
+      <button
+        ref={buttonRef}
+        aria-label={show ? 'Close' : 'Settings'}
+        className={`xpack-o-root__control-button xpack-o-root__button-${show ? 'close' : 'setting'}`}
+        onClick={handleClick}
+      >
+        <svg className="xpack-o-root__control-svg" viewBox="0 0 30 30">
+          <use xlinkHref={show ? '/assets/images/root.svg#close' : '/assets/images/root.svg#setting'} />
+        </svg>
+      </button>
+
+      <div ref={optionItemsRef} className={`xpack-o-root__active-item-options ${show ? 'show' : ''}`}>
+        <button className="xpack-o-root__nav-item pl-state-toggle" onClick={handleStateToggle}>
+          <StateAnimationHtml keyExist={!!keyExist} />
+          {toggleCtaText}
+        </button>
+
+        <button className="xpack-o-root__nav-item pl-state-toggle" onClick={handleThemeToggle}>
+          Change theme
+        </button>
+
+        <button className="xpack-o-root__nav-item panel-position" onClick={handleChangePanelPosition}>
+          {isTopPanel ? 'Set left panel' : 'Set top panel'}
+        </button>
+
+        <a className="xpack-o-root__nav-item" href={viteAbsoluteUrl(activeItem.path, true)} rel="noreferrer" target="_blank">
+          Open in new tab
+        </a>
+
+        <div className="xpack-o-root__nav-item-seperator" />
+
+        <a className="xpack-o-root__nav-item" href="https://tuyen.blog/optimizely-cms/frontend/get-started/" rel="noreferrer" target="_blank">
+          About this library
+          <svg className="xpack-o-root__control-svg" viewBox="0 0 30 30">
+            <use xlinkHref="/assets/images/root.svg#external" />
+          </svg>
+        </a>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+}

package/xpack/root/frame-controls.tsx

@@ -0,0 +1,139 @@
+import { useState } from 'react';
+
+const MIN_FRAME_SIZE = 350;
+const MSG_IFRAME_SIZE = 'MSG_IFRAME_SIZE';
+
+const randomIntFromInterval = (min: number, max: number): number => {
+  // min and max included
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+export default function FrameControls() {
+  const [discoTimer, setDiscoTimer] = useState<NodeJS.Timeout>();
+
+  const setIFrameWidth = (width?: number) => {
+    const wrapper = document.getElementById('root-iframe-wrapper');
+
+    if (!wrapper) {
+      return;
+    }
+
+    if (width) {
+      wrapper.style.maxWidth = `min(100%, ${width}px)`;
+      sessionStorage.setItem(MSG_IFRAME_SIZE, width + '');
+    } else {
+      wrapper.style.removeProperty('max-width');
+    }
+  };
+
+  const handleMobileClick = () => {
+    if (discoTimer) {
+      clearInterval(discoTimer);
+    }
+
+    const width = randomIntFromInterval(MIN_FRAME_SIZE, 768);
+
+    setIFrameWidth(width);
+  };
+
+  const handleTabletClick = () => {
+    if (discoTimer) {
+      clearInterval(discoTimer);
+    }
+
+    const width = randomIntFromInterval(768, 1024);
+
+    setIFrameWidth(width);
+  };
+
+  const handleDesktopClick = () => {
+    if (discoTimer) {
+      clearInterval(discoTimer);
+    }
+
+    const maxWidth = document.body.clientWidth - 300;
+
+    const width = randomIntFromInterval(1024, Math.max(1024, maxWidth));
+
+    setIFrameWidth(width);
+  };
+
+  const handleFullClick = () => {
+    if (discoTimer) {
+      clearInterval(discoTimer);
+    }
+
+    setIFrameWidth(undefined);
+    sessionStorage.removeItem(MSG_IFRAME_SIZE);
+  };
+
+  const handleRandomClick = () => {
+    if (discoTimer) {
+      clearInterval(discoTimer);
+    }
+
+    const maxWidth = document.body.clientWidth - 300;
+
+    const width = randomIntFromInterval(MIN_FRAME_SIZE, Math.max(MIN_FRAME_SIZE, maxWidth));
+
+    setIFrameWidth(width);
+    sessionStorage.setItem(MSG_IFRAME_SIZE, width + '');
+  };
+
+  const handleDiscoClick = () => {
+    if (discoTimer) {
+      clearInterval(discoTimer);
+
+      return;
+    }
+
+    const timer = setInterval(() => {
+      const maxWidth = document.body.clientWidth - 300;
+
+      const width = randomIntFromInterval(MIN_FRAME_SIZE, Math.max(MIN_FRAME_SIZE, maxWidth));
+
+      setIFrameWidth(width);
+      sessionStorage.setItem(MSG_IFRAME_SIZE, width + '');
+    }, 2000);
+
+    setDiscoTimer(timer);
+  };
+
+  return (
+    <div className="xpack-o-root__frame-control">
+      <div className="xpack-o-root__actual-width" id="root-actual-iframe-width" />
+      <div className="xpack-o-root__controls">
+        <button aria-label="Mobile View" className="xpack-o-root__control-button" title="Mobile View" onClick={handleMobileClick}>
+          <svg className="xpack-o-root__control-svg" viewBox="0 0 24 24">
+            <use xlinkHref="/assets/images/root.svg#phone" />
+          </svg>
+        </button>
+        <button aria-label="Tablet View" className="xpack-o-root__control-button" title="Tablet View" onClick={handleTabletClick}>
+          <svg className="xpack-o-root__control-svg" viewBox="0 0 24 24">
+            <use xlinkHref="/assets/images/root.svg#tablet" />
+          </svg>
+        </button>
+        <button aria-label="Desktop View" className="xpack-o-root__control-button" title="Desktop View" onClick={handleDesktopClick}>
+          <svg className="xpack-o-root__control-svg" viewBox="0 0 24 24">
+            <use xlinkHref="/assets/images/root.svg#desktop" />
+          </svg>
+        </button>
+        <button aria-label="Full Width View" className="xpack-o-root__control-button" title="Full Width View" onClick={handleFullClick}>
+          <svg className="xpack-o-root__control-svg" viewBox="0 0 24 24">
+            <use xlinkHref="/assets/images/root.svg#hay" />
+          </svg>
+        </button>
+        <button aria-label="Random Width View" className="xpack-o-root__control-button" title="Random Width View" onClick={handleRandomClick}>
+          <svg className="xpack-o-root__control-svg" viewBox="0 0 24 24">
+            <use xlinkHref="/assets/images/root.svg#random" />
+          </svg>
+        </button>
+        <button aria-label="Disco Mode View" className="xpack-o-root__control-button" title="Disco Mode View" onClick={handleDiscoClick}>
+          <svg className="xpack-o-root__control-svg" viewBox="0 0 24 24">
+            <use xlinkHref="/assets/images/root.svg#disco-ball" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}

package/xpack/root/index.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { RootModel, SinglePageNode } from '@_types/types';
+import { useEffect, useMemo, useState } from 'react';
+import { viteAbsoluteUrl } from '@helpers/functions';
+
+import { RootContext, RootData } from './root-context';
+import FrameControls from './frame-controls';
+import ActiveItemOptions from './active-item-options';
+import RootNav from './root-nav';
+
+export default function Root(props: RootModel) {
+  const [activeItem, setActiveItem] = useState<SinglePageNode | undefined>(typeof window !== 'undefined' ? undefined : undefined);
+  const [isTopPanel, setTopPanel] = useState<boolean>(() =>
+    typeof localStorage !== 'undefined' ? localStorage.getItem('MSG_IS_TOP_PANEL') === 'true' : false
+  );
+
+  useEffect(() => {
+    if (!activeItem) {
+      return;
+    }
+
+    const frame = document.querySelector<HTMLIFrameElement>('#root-iframe');
+
+    if (!frame) {
+      return;
+    }
+
+    frame.src = viteAbsoluteUrl(activeItem.path, true);
+    document.title = activeItem.name + ' - ' + import.meta.env.VITE_TITLE_SUFFIX;
+  }, [activeItem]);
+
+  const rootData: RootData = {
+    activeItem,
+    setActiveItem,
+    isTopPanel,
+    setTopPanel,
+  };
+
+  const routes = useMemo(() => {
+    const result: SinglePageNode[] = [];
+
+    props.routes.forEach((route) => {
+      if (route.type === 'single') {
+        result.push({
+          path: route.path,
+          name: route.name,
+          type: 'single',
+        });
+
+        return;
+      }
+      route.items.forEach((item) => {
+        result.push({
+          path: item.path,
+          name: item.name,
+          type: 'single',
+        });
+      });
+    });
+
+    return result;
+  }, [props.routes]);
+
+  useEffect(() => {
+    const hash = window.location.hash;
+    const activePath = hash && hash.startsWith('#/') ? hash.substring(1) : '/pages/home';
+    const activeIndex = routes.findIndex((r) => r.path === activePath);
+
+    if (activeIndex >= 0) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setActiveItem(routes[activeIndex]);
+    } else {
+      const homeIndex = routes.findIndex((r) => r.path === '/pages/home');
+
+      setActiveItem(routes[homeIndex]);
+    }
+  }, [routes]);
+
+  const handleStorageChange = (event: StorageEvent) => {
+    switch (event.key) {
+      case 'MSG_IS_TOP_PANEL':
+        setTopPanel(event.newValue === 'true');
+        break;
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('storage', handleStorageChange);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
+
+  return routes ? (
+    <RootContext.Provider value={rootData}>
+      <div className={`xpack-o-root ${isTopPanel ? 'top-panel' : ''}`}>
+        <RootNav routes={props.routes} />
+        <FrameControls />
+        <ActiveItemOptions />
+      </div>
+    </RootContext.Provider>
+  ) : (
+    <></>
+  );
+}

package/xpack/root/rendered-item.tsx

@@ -0,0 +1,25 @@
+import { SinglePageNode } from '@_types/_root';
+import { MouseEvent } from 'react';
+import { viteAbsoluteUrl } from '@helpers/functions';
+
+import { useRootContext } from './root-context';
+
+export default function RenderedItem(item: SinglePageNode) {
+  const { activeItem, setActiveItem } = useRootContext();
+
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    window.location.hash = item.path;
+    setActiveItem(item);
+
+    return false;
+  };
+
+  const activeClass = activeItem && activeItem.path === item.path ? ' xpack-o-root__nav-item--active' : '';
+
+  return (
+    <a className={'xpack-o-root__nav-item' + activeClass} href={viteAbsoluteUrl(item.path, true)} target="inner" onClick={handleClick}>
+      {item.name}
+    </a>
+  );
+}

package/xpack/root/root-context.ts

@@ -0,0 +1,22 @@
+import { SinglePageNode } from '@_types/types';
+import { createContext, useContext } from 'react';
+
+export interface RootData {
+  activeItem?: SinglePageNode;
+  setActiveItem: (item?: SinglePageNode) => void;
+  isTopPanel?: boolean;
+  setTopPanel: (isTopPanel: boolean) => void;
+}
+
+export const RootContext = createContext<RootData>({
+  setActiveItem: () => {
+    // empty
+  },
+  setTopPanel: () => {
+    // empty
+  },
+});
+
+export function useRootContext() {
+  return useContext(RootContext);
+}

package/xpack/root/root-nav.tsx

@@ -0,0 +1,162 @@
+import { MultiplePageNode, RootItemModel } from '@_types/types';
+import { debounce } from 'lodash';
+import { useRef, useCallback, useEffect, useState, useMemo } from 'react';
+import { viteAbsoluteUrl } from '@helpers/functions';
+
+import { useRootContext } from './root-context';
+import { useOnClickOutside } from './use-click-outside';
+import RenderedItem from './rendered-item';
+
+interface Props {
+  routes: RootItemModel[];
+}
+
+export default function RootNav({ routes: routesProp }: Props) {
+  const { activeItem } = useRootContext();
+  const [show, setShow] = useState(false);
+  const navItemRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLAnchorElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [routes, setRoutes] = useState(routesProp);
+  const [routesSearch, setRoutesSearch] = useState<RootItemModel[]>([]);
+  const [textSearch, setTextSearch] = useState('');
+
+  const closeMenu = () => {
+    setShow(false);
+    setTextSearch('');
+  };
+
+  useOnClickOutside(navItemRef, closeMenu, [buttonRef]);
+
+  const handleClick = () => {
+    if (!show && inputRef.current) {
+      inputRef.current.focus();
+    }
+    setShow(!show);
+  };
+
+  const handleChange = useCallback(
+    (text: string) => {
+      const searchTerms = text.trim().toLocaleLowerCase().split(/\s+/);
+      const isSearchActive = searchTerms.length > 0 && text.trim();
+
+      const isItemIncludedText: (item: RootItemModel) => boolean = (item: RootItemModel) => {
+        if (!isSearchActive) return false;
+
+        if (item.type === 'single') {
+          return searchTerms.some((s) => item.name.toLocaleLowerCase().includes(s));
+        }
+
+        return searchTerms.some(
+          (s) => item.name.toLocaleLowerCase().includes(s) || (item as MultiplePageNode).items.some((x) => isItemIncludedText(x))
+        );
+      };
+
+      const tempRoutesSearch: RootItemModel[] = [];
+      const tempRoutes: RootItemModel[] = [];
+
+      routesProp.forEach((item) => {
+        (isItemIncludedText(item) ? tempRoutesSearch : tempRoutes).push(item);
+      });
+
+      setRoutesSearch(tempRoutesSearch);
+      setRoutes(tempRoutes);
+    },
+    [routesProp]
+  );
+
+  const debouncedHandleChange = useMemo(() => debounce(handleChange, 500), [handleChange]);
+
+  useEffect(() => {
+    debouncedHandleChange(textSearch);
+  }, [debouncedHandleChange, textSearch]);
+
+  return (
+    <>
+      {/*eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions*/}
+      <a ref={buttonRef} className="xpack-o-root__button-close" onClick={handleClick}>
+        <button aria-label={show ? 'Close' : 'Pages'} className="xpack-o-root__control-button xpack-o-root__button-close">
+          <svg className="xpack-o-root__control-svg">
+            <use xlinkHref={viteAbsoluteUrl('/assets/images/root.svg#' + (show ? 'close' : 'list'))} />
+          </svg>
+        </button>
+      </a>
+
+      <p className="xpack-o-root__title">{activeItem?.name}</p>
+
+      <div ref={navItemRef} className={`xpack-o-root__nav-items ${show ? 'show' : ''}`}>
+        <div className="xpack-o-root__search">
+          <input
+            ref={inputRef}
+            placeholder="Find a pattern"
+            type={'text'}
+            value={textSearch}
+            onChange={(e) => {
+              setTextSearch(e.target.value);
+            }}
+          />
+        </div>
+
+        <div className="xpack-o-root__items">
+          {textSearch.trim() && (
+            <div className="xpack-o-root__search-matches">
+              {routesSearch.length
+                ? routesSearch
+                    .filter((r) => r.path != '/' && r.path != '/index')
+                    .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
+                    .map((item, index) =>
+                      item.path ? (
+                        <RenderedItem key={index} {...item} />
+                      ) : (
+                        <details
+                          key={index}
+                          className="xpack-o-root__nav-item-collection"
+                          open={
+                            !!(item as MultiplePageNode).items.find((x: any) => {
+                              return window.location.hash.includes(x.path);
+                            })
+                          }
+                        >
+                          <summary>{item.name}</summary>
+                          {}
+                          {(item as MultiplePageNode).items.map((node: any, idx: number) => (
+                            <RenderedItem key={idx} {...node} />
+                          ))}
+                        </details>
+                      )
+                    )
+                : textSearch.trim() && <div className="xpack-o-root__nav-message ">No pattern matches</div>}
+            </div>
+          )}
+
+          <div className={`xpack-o-root__search-not-matches ${textSearch.trim() ? 'blur' : ''}`}>
+            {routes
+              .filter((r) => r.path != '/' && r.path != '/index')
+              .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
+              .map((item, index) =>
+                item.path ? (
+                  <RenderedItem key={index} {...item} />
+                ) : (
+                  <details
+                    key={index}
+                    className="xpack-o-root__nav-item-collection"
+                    open={
+                      !!(item as MultiplePageNode).items.find((x: any) => {
+                        return window.location.hash.includes(x.path);
+                      })
+                    }
+                  >
+                    <summary>{item.name}</summary>
+                    {}
+                    {(item as MultiplePageNode).items.map((node: any, idx: number) => (
+                      <RenderedItem key={idx} {...node} />
+                    ))}
+                  </details>
+                )
+              )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}