lupine.web 1.1.3 → 1.1.5

package/src/core/bind-theme.ts

@@ -1,53 +1,53 @@
-import { setCookie } from '../lib/cookie';
-import { ThemesProps } from '../models';
-import { isFrontEnd } from '../lib/is-frontend';
-import { getEitherCookie } from './server-cookie';
-
-// theme doesn't need to reset, theme name is stored in cookie
-
-export const defaultThemeName = 'light';
-export const themeCookieName = 'theme';
-export const updateThemeEventName = 'updateTheme';
-export const themeAttributeName = 'data-theme';
-const _themeCfg: { defaultTheme: string; themes: ThemesProps } = { defaultTheme: defaultThemeName, themes: {} };
-export const bindTheme = (defaultTheme: string, themes: ThemesProps) => {
-  _themeCfg.defaultTheme = defaultTheme;
-  _themeCfg.themes = themes;
-
-  // set to cookie
-  getCurrentTheme();
-};
-
-export const getCurrentTheme = () => {
-  let themeName = getEitherCookie(themeCookieName) as string;
-  if (!themeName || !_themeCfg.themes[themeName]) {
-    themeName = _themeCfg.defaultTheme;
-    if (isFrontEnd()) {
-      setCookie(themeCookieName, _themeCfg.defaultTheme);
-    }
-  }
-  return { themeName, themes: _themeCfg.themes };
-};
-
-export const updateTheme = (themeName: string) => {
-  // Theme is only updated in Browser
-  _themeCfg.defaultTheme = themeName;
-  if (!isFrontEnd()) {
-    return;
-  }
-
-  setCookie(themeCookieName, themeName);
-  document.documentElement.setAttribute(themeAttributeName, themeName);
-
-  // update theme for all iframe
-  // TODO: third-party domains?
-  const allIframe = document.querySelectorAll('iframe');
-  for (let i = 0; i < allIframe.length; i++) {
-    if (allIframe[i].contentWindow && allIframe[i].contentWindow!.top === window) {
-      allIframe[i].contentWindow!.document.documentElement.setAttribute(themeAttributeName, themeName);
-    }
-  }
-
-  const event = new CustomEvent(updateThemeEventName, { detail: themeName });
-  window.dispatchEvent(event);
-};
+import { setCookie } from '../lib/cookie';
+import { ThemesProps } from '../models';
+import { isFrontEnd } from '../lib/is-frontend';
+import { getEitherCookie } from './server-cookie';
+
+// theme doesn't need to reset, theme name is stored in cookie
+
+export const defaultThemeName = 'light';
+export const themeCookieName = 'theme';
+export const updateThemeEventName = 'updateTheme';
+export const themeAttributeName = 'data-theme';
+const _themeCfg: { defaultTheme: string; themes: ThemesProps } = { defaultTheme: defaultThemeName, themes: {} };
+export const bindTheme = (defaultTheme: string, themes: ThemesProps) => {
+  _themeCfg.defaultTheme = defaultTheme;
+  _themeCfg.themes = themes;
+
+  // set to cookie
+  getCurrentTheme();
+};
+
+export const getCurrentTheme = () => {
+  let themeName = getEitherCookie(themeCookieName) as string;
+  if (!themeName || !_themeCfg.themes[themeName]) {
+    themeName = _themeCfg.defaultTheme;
+    if (isFrontEnd()) {
+      setCookie(themeCookieName, _themeCfg.defaultTheme);
+    }
+  }
+  return { themeName, themes: _themeCfg.themes };
+};
+
+export const updateTheme = (themeName: string) => {
+  // Theme is only updated in Browser
+  _themeCfg.defaultTheme = themeName;
+  if (!isFrontEnd()) {
+    return;
+  }
+
+  setCookie(themeCookieName, themeName);
+  document.documentElement.setAttribute(themeAttributeName, themeName);
+
+  // update theme for all iframe
+  // TODO: third-party domains?
+  const allIframe = document.querySelectorAll('iframe');
+  for (let i = 0; i < allIframe.length; i++) {
+    if (allIframe[i].contentWindow && allIframe[i].contentWindow!.top === window) {
+      allIframe[i].contentWindow!.document.documentElement.setAttribute(themeAttributeName, themeName);
+    }
+  }
+
+  const event = new CustomEvent(updateThemeEventName, { detail: themeName });
+  window.dispatchEvent(event);
+};

package/src/core/camel-to-hyphens.ts

@@ -1,3 +1,3 @@
-export const camelToHyphens = function (name: string) {
-  return name.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
-};
+export const camelToHyphens = function (name: string) {
+  return name.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+};

package/src/core/export-lupine.ts

@@ -1,80 +1,80 @@
-import { VNode } from '../jsx';
-import { PageRouter } from './page-router';
-import { IToClientDelivery, JsonObject } from '../models';
-
-export type RenderPageFunctionsType = {
-  fetchData: (
-    url: string,
-    postBody?: string | JsonObject,
-    returnRawResponse?: boolean,
-    returnHeaders?: boolean
-  ) => Promise<any>;
-  // add host for mobile app, which needs the host
-  baseUrl: (urlWithoutHost?: string) => string;
-  [key: string]: Function;
-};
-export interface PageProps {
-  url: string;
-  // urlSections: string[];
-  query: { [key: string]: string };
-  urlParameters: { [key: string]: string };
-  renderPageFunctions: RenderPageFunctionsType;
-}
-
-export type PageResultType = {
-  content: string;
-  title: string;
-  metaData: string;
-  themeName: string;
-  globalCss: string;
-};
-export type _LupineJs = {
-  // generatePage and initializePage are set in initialize.ts to avoid circular reference
-  generatePage: (props: any, toClientDelivery: IToClientDelivery) => Promise<PageResultType>;
-  initializePage: (newUrl?: string) => Promise<void>;
-  renderPageFunctions: RenderPageFunctionsType;
-  router: PageRouter | ((props: PageProps) => Promise<VNode<any>>);
-  renderPageProps: PageProps;
-};
-
-// main instance to be used in the FE and the BE
-export const _lupineJs: _LupineJs = {} as _LupineJs;
-
-// for SSR, it exports _lupineJs function for the server to call
-// this should be loaded in a sandbox
-if (typeof globalThis !== 'undefined') {
-  const gThis = globalThis as any;
-  if (gThis._lupineJs === null) {
-    gThis._lupineJs = () => {
-      return _lupineJs;
-    };
-  }
-}
-// if (typeof exports !== 'undefined') {
-//   // ignore esbuild's warnings:
-//   // The CommonJS "exports" variable is treated as a global variable in an ECMAScript module and may not work as expected [commonjs-variable-in-esm]
-//   exports._lupineJs = () => {
-//     return _lupineJs;
-//   };
-// }
-
-// this should be called by the FE and also by the server side to set fetchData and others for client and server side rendering.
-// And the RenderPageFunctionsType will be passed to call (generate) a page through PageProps
-export const bindRenderPageFunctions = (calls: RenderPageFunctionsType) => {
-  _lupineJs.renderPageFunctions = calls || {};
-};
-// export const getRenderPageFunctions = (): RenderPageFunctionsType => {
-//   return globalThis._lupineJs.renderPageFunctions;
-// }
-// this is only used inside the core
-export const setRenderPageProps = (props: PageProps) => {
-  _lupineJs.renderPageProps = props;
-};
-// this is used by the code to get url info when it's executed in the FE or in the server side.
-export const getRenderPageProps = (): PageProps => {
-  return _lupineJs.renderPageProps;
-};
-
-export const bindRouter = (router: PageRouter | ((props: PageProps) => Promise<VNode<any>>)) => {
-  _lupineJs.router = router;
-};
+import { VNode } from '../jsx';
+import { PageRouter } from './page-router';
+import { IToClientDelivery, JsonObject } from '../models';
+
+export type RenderPageFunctionsType = {
+  fetchData: (
+    url: string,
+    postBody?: string | JsonObject,
+    returnRawResponse?: boolean,
+    returnHeaders?: boolean
+  ) => Promise<any>;
+  // add host for mobile app, which needs the host
+  baseUrl: (urlWithoutHost?: string) => string;
+  [key: string]: Function;
+};
+export interface PageProps {
+  url: string;
+  // urlSections: string[];
+  query: { [key: string]: string };
+  urlParameters: { [key: string]: string };
+  renderPageFunctions: RenderPageFunctionsType;
+}
+
+export type PageResultType = {
+  content: string;
+  title: string;
+  metaData: string;
+  themeName: string;
+  globalCss: string;
+};
+export type _LupineJs = {
+  // generatePage and initializePage are set in initialize.ts to avoid circular reference
+  generatePage: (props: any, toClientDelivery: IToClientDelivery) => Promise<PageResultType>;
+  initializePage: (newUrl?: string) => Promise<void>;
+  renderPageFunctions: RenderPageFunctionsType;
+  router: PageRouter | ((props: PageProps) => Promise<VNode<any>>);
+  renderPageProps: PageProps;
+};
+
+// main instance to be used in the FE and the BE
+export const _lupineJs: _LupineJs = {} as _LupineJs;
+
+// for SSR, it exports _lupineJs function for the server to call
+// this should be loaded in a sandbox
+if (typeof globalThis !== 'undefined') {
+  const gThis = globalThis as any;
+  if (gThis._lupineJs === null) {
+    gThis._lupineJs = () => {
+      return _lupineJs;
+    };
+  }
+}
+// if (typeof exports !== 'undefined') {
+//   // ignore esbuild's warnings:
+//   // The CommonJS "exports" variable is treated as a global variable in an ECMAScript module and may not work as expected [commonjs-variable-in-esm]
+//   exports._lupineJs = () => {
+//     return _lupineJs;
+//   };
+// }
+
+// this should be called by the FE and also by the server side to set fetchData and others for client and server side rendering.
+// And the RenderPageFunctionsType will be passed to call (generate) a page through PageProps
+export const bindRenderPageFunctions = (calls: RenderPageFunctionsType) => {
+  _lupineJs.renderPageFunctions = calls || {};
+};
+// export const getRenderPageFunctions = (): RenderPageFunctionsType => {
+//   return globalThis._lupineJs.renderPageFunctions;
+// }
+// this is only used inside the core
+export const setRenderPageProps = (props: PageProps) => {
+  _lupineJs.renderPageProps = props;
+};
+// this is used by the code to get url info when it's executed in the FE or in the server side.
+export const getRenderPageProps = (): PageProps => {
+  return _lupineJs.renderPageProps;
+};
+
+export const bindRouter = (router: PageRouter | ((props: PageProps) => Promise<VNode<any>>)) => {
+  _lupineJs.router = router;
+};

package/src/core/index.ts

@@ -1,17 +1,17 @@
-export * from './bind-attributes';
-export * from './bind-lang';
-export * from './bind-links';
-export * from './bind-meta';
-export * from './bind-ref';
-export * from './bind-styles';
-export * from './bind-theme';
-export * from './export-lupine';
-export * from './camel-to-hyphens';
-export * from './mount-component';
-export * from './page-loaded-events';
-export * from './page-router';
-export * from './render-component';
-export * from './replace-innerhtml';
-export * from './server-cookie';
-
-export * from './initialize';
+export * from './bind-attributes';
+export * from './bind-lang';
+export * from './bind-links';
+export * from './bind-meta';
+export * from './bind-ref';
+export * from './bind-styles';
+export * from './bind-theme';
+export * from './export-lupine';
+export * from './camel-to-hyphens';
+export * from './mount-component';
+export * from './page-loaded-events';
+export * from './page-router';
+export * from './render-component';
+export * from './replace-innerhtml';
+export * from './server-cookie';
+
+export * from './initialize';

package/src/core/initialize.ts

@@ -1,116 +1,116 @@
-import { Logger } from '../lib/logger';
-import { generateAllGlobalStyles } from './bind-styles';
-import { defaultThemeName, getCurrentTheme, updateTheme } from './bind-theme';
-import { mountInnerComponent } from './mount-component';
-// import { callPageResetEvent } from './page-reset-events';
-import { PageRouter } from './page-router';
-import { callPageLoadedEvent } from './page-loaded-events';
-import { initServerCookies } from './server-cookie';
-import { IToClientDelivery } from '../models';
-import { getMetaDataObject, getMetaDataTags, getPageTitle } from './bind-meta';
-import { initWebEnv } from '../lib/web-env';
-import { _lupineJs, PageProps, PageResultType, setRenderPageProps } from './export-lupine';
-import { isFrontEnd } from '../lib/is-frontend';
-import { WebConfig } from '../lib/web-config';
-
-const logger = new Logger('initialize');
-
-const renderTargetPage = async (props: PageProps, renderPartPage: boolean) => {
-  if (_lupineJs.router instanceof PageRouter) {
-    return _lupineJs.router.handleRoute(props.url, props, renderPartPage);
-  }
-  return await _lupineJs.router(props);
-};
-
-// this is called by server side for SSR (server-side-rendering)
-const generatePage = async (props: PageProps, toClientDelivery: IToClientDelivery): Promise<PageResultType> => {
-  setRenderPageProps(props);
-
-  initWebEnv(toClientDelivery.getWebEnv());
-  WebConfig.initFromData(toClientDelivery.getWebSetting());
-  // initWebSetting(toClientDelivery.getWebSetting());
-  initServerCookies(toClientDelivery.getServerCookie());
-  // callPageResetEvent();
-  callPageLoadedEvent();
-
-  const jsxNodes = await renderTargetPage(props, false);
-  if (!jsxNodes || !jsxNodes.props) {
-    return {
-      content: `Unexpected url: ${props.url}`,
-      title: '',
-      metaData: '',
-      globalCss: '',
-      themeName: defaultThemeName,
-    };
-  }
-
-  await mountInnerComponent(null, jsxNodes);
-  const currentTheme = getCurrentTheme();
-  const cssText = generateAllGlobalStyles();
-  const content = jsxNodes.props._html.join('');
-
-  return {
-    content,
-    title: getPageTitle(),
-    metaData: getMetaDataTags(),
-    globalCss: cssText,
-    themeName: currentTheme.themeName,
-  };
-};
-_lupineJs.generatePage = generatePage;
-
-const _initSaved = {
-  pageInitialized: false,
-};
-// this is called in the FE when the document is loaded
-// to avoid circular reference, bindLinks can't call initializePage directly
-export const initializePage = async (newUrl?: string) => {
-  const currentPageInitialized = _initSaved.pageInitialized;
-  _initSaved.pageInitialized = true;
-  logger.log('initializePage: ', newUrl);
-  if (newUrl) {
-    window.history.pushState({ urlPath: newUrl }, '', newUrl);
-    // prevents browser from storing history with each change:
-    // window.history.replaceState({ html: '', pageTitle: newUrl }, '', newUrl);
-  }
-  const splitUrl = newUrl ? newUrl.split('?') : [];
-  const url = splitUrl[0] || document.location.pathname;
-  const queryString = splitUrl[1] || document.location.search;
-
-  const props: PageProps = {
-    url,
-    // urlSections: url.split('/').filter((i) => !!i),
-    query: Object.fromEntries(new URLSearchParams(queryString)), // new URLSearchParams(queryString),
-    urlParameters: {},
-    renderPageFunctions: _lupineJs.renderPageFunctions,
-  };
-
-  setRenderPageProps(props);
-  // !currentPageInitialized && callPageResetEvent();
-  !currentPageInitialized && callPageLoadedEvent();
-
-  const jsxNodes = await renderTargetPage(props, currentPageInitialized);
-  if (jsxNodes === null) return;
-  if (!jsxNodes || !jsxNodes.props) {
-    document.querySelector('.lupine-root')!.innerHTML = `Unexpected url: ${url}`;
-    return;
-  }
-
-  // generateAllGlobalStyles will be updated directly in Browser
-  await mountInnerComponent('.lupine-root', jsxNodes);
-  updateTheme(getCurrentTheme().themeName);
-
-  // title
-  document.title = getPageTitle();
-  const metaData = getMetaDataObject();
-  // meta data?
-};
-if (isFrontEnd()) {
-  addEventListener('popstate', (event) => {
-    initializePage();
-  });
-  addEventListener('load', (event) => {
-    initializePage();
-  });
-}
-_lupineJs.initializePage = initializePage;
+import { Logger } from '../lib/logger';
+import { generateAllGlobalStyles } from './bind-styles';
+import { defaultThemeName, getCurrentTheme, updateTheme } from './bind-theme';
+import { mountInnerComponent } from './mount-component';
+// import { callPageResetEvent } from './page-reset-events';
+import { PageRouter } from './page-router';
+import { callPageLoadedEvent } from './page-loaded-events';
+import { initServerCookies } from './server-cookie';
+import { IToClientDelivery } from '../models';
+import { getMetaDataObject, getMetaDataTags, getPageTitle } from './bind-meta';
+import { initWebEnv } from '../lib/web-env';
+import { _lupineJs, PageProps, PageResultType, setRenderPageProps } from './export-lupine';
+import { isFrontEnd } from '../lib/is-frontend';
+import { WebConfig } from '../lib/web-config';
+
+const logger = new Logger('initialize');
+
+const renderTargetPage = async (props: PageProps, renderPartPage: boolean) => {
+  if (_lupineJs.router instanceof PageRouter) {
+    return _lupineJs.router.handleRoute(props.url, props, renderPartPage);
+  }
+  return await _lupineJs.router(props);
+};
+
+// this is called by server side for SSR (server-side-rendering)
+const generatePage = async (props: PageProps, toClientDelivery: IToClientDelivery): Promise<PageResultType> => {
+  setRenderPageProps(props);
+
+  initWebEnv(toClientDelivery.getWebEnv());
+  WebConfig.initFromData(toClientDelivery.getWebSetting());
+  // initWebSetting(toClientDelivery.getWebSetting());
+  initServerCookies(toClientDelivery.getServerCookie());
+  // callPageResetEvent();
+  callPageLoadedEvent();
+
+  const jsxNodes = await renderTargetPage(props, false);
+  if (!jsxNodes || !jsxNodes.props) {
+    return {
+      content: `Unexpected url: ${props.url}`,
+      title: '',
+      metaData: '',
+      globalCss: '',
+      themeName: defaultThemeName,
+    };
+  }
+
+  await mountInnerComponent(null, jsxNodes);
+  const currentTheme = getCurrentTheme();
+  const cssText = generateAllGlobalStyles();
+  const content = jsxNodes.props._html.join('');
+
+  return {
+    content,
+    title: getPageTitle(),
+    metaData: getMetaDataTags(),
+    globalCss: cssText,
+    themeName: currentTheme.themeName,
+  };
+};
+_lupineJs.generatePage = generatePage;
+
+const _initSaved = {
+  pageInitialized: false,
+};
+// this is called in the FE when the document is loaded
+// to avoid circular reference, bindLinks can't call initializePage directly
+export const initializePage = async (newUrl?: string) => {
+  const currentPageInitialized = _initSaved.pageInitialized;
+  _initSaved.pageInitialized = true;
+  logger.log('initializePage: ', newUrl);
+  if (newUrl) {
+    window.history.pushState({ urlPath: newUrl }, '', newUrl);
+    // prevents browser from storing history with each change:
+    // window.history.replaceState({ html: '', pageTitle: newUrl }, '', newUrl);
+  }
+  const splitUrl = newUrl ? newUrl.split('?') : [];
+  const url = splitUrl[0] || document.location.pathname;
+  const queryString = splitUrl[1] || document.location.search;
+
+  const props: PageProps = {
+    url,
+    // urlSections: url.split('/').filter((i) => !!i),
+    query: Object.fromEntries(new URLSearchParams(queryString)), // new URLSearchParams(queryString),
+    urlParameters: {},
+    renderPageFunctions: _lupineJs.renderPageFunctions,
+  };
+
+  setRenderPageProps(props);
+  // !currentPageInitialized && callPageResetEvent();
+  !currentPageInitialized && callPageLoadedEvent();
+
+  const jsxNodes = await renderTargetPage(props, currentPageInitialized);
+  if (jsxNodes === null) return;
+  if (!jsxNodes || !jsxNodes.props) {
+    document.querySelector('.lupine-root')!.innerHTML = `Error happened or unexpected url: ${url}`;
+    return;
+  }
+
+  // generateAllGlobalStyles will be updated directly in Browser
+  await mountInnerComponent('.lupine-root', jsxNodes);
+  updateTheme(getCurrentTheme().themeName);
+
+  // title
+  document.title = getPageTitle();
+  const metaData = getMetaDataObject();
+  // meta data?
+};
+if (isFrontEnd()) {
+  addEventListener('popstate', (event) => {
+    initializePage();
+  });
+  addEventListener('load', (event) => {
+    initializePage();
+  });
+}
+_lupineJs.initializePage = initializePage;