lupine.web 1.0.15 → 1.0.17

package/README.md

@@ -1,3 +1,3 @@
 # lupine.web
 
-LupineJs is a React-like, extremely fast, small size and lightweight frontend framework.
+lupine.web is a React-like, extremely fast, small size and lightweight frontend framework.

package/package.json

@@ -1,14 +1,10 @@
 {
   "name": "lupine.web",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://uuware.com/",
   "description": "lupine.web is a extremely fast, small size and lightweight frontend framework, using React TSX syntax.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/uuware/lupine.web.git"
-  },
   "main": "src/index.ts",
   "source": "src/index.ts",
   "types": "src/index.ts",

package/src/core/bind-lang.ts

@@ -1,4 +1,5 @@
-import { DomUtils } from '../lib';
+import { setCookie } from '../lib/cookie';
+import { isFrontEnd } from '../lib/is-frontend';
 import { getEitherCookie } from './server-cookie';
 
 // The FE only loads one language for the consideration of the size
@@ -20,8 +21,8 @@ export const getCurrentLang = () => {
   let langName = getEitherCookie(langCookieName) as string;
   if (!langName || !_langCfg.langs[langName]) {
     langName = _langCfg.defaultLang;
-    if (typeof window !== 'undefined') {
-      DomUtils.setCookie(langCookieName, _langCfg.defaultLang);
+    if (isFrontEnd()) {
+      setCookie(langCookieName, _langCfg.defaultLang);
     }
   }
   return { langName, langs: _langCfg.langs };
@@ -31,11 +32,11 @@ export const getCurrentLang = () => {
 export const updateLang = (langName: string) => {
   // Lang is only updated in Browser
   _langCfg.defaultLang = langName;
-  if (typeof window === 'undefined') {
+  if (!isFrontEnd()) {
     return;
   }
 
-  DomUtils.setCookie(langCookieName, langName);
+  setCookie(langCookieName, langName);
   // document.documentElement.setAttribute(langAttributeName, langName);
 
   // // update lang for all iframe

package/src/core/bind-links.ts

@@ -1,4 +1,4 @@
-import { initializePage } from './core';
+import { _lupineJs } from './export-lupine';
 
 export function bindLinks(el: Element | Document) {
   const links = el.getElementsByTagName('a');
@@ -8,7 +8,7 @@ export function bindLinks(el: Element | Document) {
       href = href.substring(document.location.origin.length);
       // console.log(`====${href}, javascript:init('${document.links[i].href}')`);
       links[i].onclick = () => {
-        initializePage(href);
+        _lupineJs.initializePage(href);
         return false;
       };
     }

package/src/core/bind-meta.tsx

@@ -0,0 +1,52 @@
+// import { bindPageResetEvent } from '../core/page-reset-events';
+
+let _pageTitle = { value: '', defaultValue: '' };
+export const setPageTitle = (title: string) => {
+  _pageTitle.value = title;
+};
+
+export const getPageTitle = () => {
+  return _pageTitle.value || _pageTitle.defaultValue;
+};
+
+export const setDefaultPageTitle = (title: string) => {
+  _pageTitle.defaultValue = title;
+};
+
+let _description = { value: '', defaultValue: '' };
+export const setMetaDescription = (description: string) => {
+  _description.value = description;
+};
+
+export const getMetaDescription = () => {
+  return _description.value || _description.defaultValue;
+};
+
+export const setDefaultMetaDescription = (description: string) => {
+  _description.defaultValue = description;
+};
+
+let _metaData: { [key: string]: string } = {};
+export const addMetaDataTags = (key: string, value: string) => {
+  if (typeof value === 'undefined') {
+    delete _metaData[key];
+  } else {
+    _metaData[key] = value;
+  }
+};
+
+export const getMetaDataTags = () => {
+  return Object.values(getMetaDataObject()).join('\n');
+};
+
+export const getMetaDataObject = () => {
+  const metaDescription = getMetaDescription();
+  return metaDescription
+    ? Object.assign(
+        {
+          'name:description': `<meta name="description" content="${metaDescription}">`,
+        },
+        _metaData
+      )
+    : _metaData;
+};

package/src/core/bind-theme.ts

@@ -1,5 +1,6 @@
-import { CssProps } from '../jsx';
-import { DomUtils } from '../lib';
+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
@@ -8,8 +9,8 @@ export const defaultThemeName = 'light';
 export const themeCookieName = 'theme';
 export const updateThemeEventName = 'updateTheme';
 export const themeAttributeName = 'data-theme';
-const _themeCfg: any = { defaultTheme: defaultThemeName, themes: {} };
-export const bindTheme = (defaultTheme: string, themes: { [key: string]: CssProps }) => {
+const _themeCfg: { defaultTheme: string; themes: ThemesProps } = { defaultTheme: defaultThemeName, themes: {} };
+export const bindTheme = (defaultTheme: string, themes: ThemesProps) => {
   _themeCfg.defaultTheme = defaultTheme;
   _themeCfg.themes = themes;
 
@@ -21,24 +22,25 @@ export const getCurrentTheme = () => {
   let themeName = getEitherCookie(themeCookieName) as string;
   if (!themeName || !_themeCfg.themes[themeName]) {
     themeName = _themeCfg.defaultTheme;
-    if (typeof window !== 'undefined') {
-      DomUtils.setCookie(themeCookieName, _themeCfg.defaultTheme);
+    if (isFrontEnd()) {
+      setCookie(themeCookieName, _themeCfg.defaultTheme);
     }
   }
-  return { themeName, themes: _themeCfg.themes as { [key: string]: CssProps } };
+  return { themeName, themes: _themeCfg.themes };
 };
 
 export const updateTheme = (themeName: string) => {
   // Theme is only updated in Browser
   _themeCfg.defaultTheme = themeName;
-  if (typeof window === 'undefined') {
+  if (!isFrontEnd()) {
     return;
   }
 
-  DomUtils.setCookie(themeCookieName, themeName);
+  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) {

package/src/core/export-lupine.ts

@@ -0,0 +1,64 @@
+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) => Promise<any>;
+  [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
+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,10 +1,11 @@
 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 './core';
+export * from './export-lupine';
 export * from './camel-to-hyphens';
 export * from './mount-components';
 export * from './page-loaded-events';
@@ -13,3 +14,4 @@ export * from './replace-innerhtml';
 export * from './server-cookie';
 export * from './web-version';
 
+export * from './initialize';

package/src/core/{core.ts → initialize.ts}

@@ -1,6 +1,3 @@
-import { getMetaDataObject, getMetaDataTags, getMetaTitle } from '../components';
-import { VNode } from '../jsx';
-import { initWebEnv, initWebSetting } from '../lib';
 import { Logger } from '../lib/logger';
 import { generateAllGlobalStyles } from './bind-styles';
 import { defaultThemeName, getCurrentTheme, updateTheme } from './bind-theme';
@@ -9,79 +6,13 @@ import { mountComponents } from './mount-components';
 import { PageRouter } from './page-router';
 import { callPageLoadedEvent } from './page-loaded-events';
 import { initServerCookies } from './server-cookie';
-import { IToClientDelivery } from '../models/to-client-delivery-props';
+import { IToClientDelivery } from '../models';
+import { getMetaDataObject, getMetaDataTags, getPageTitle } from './bind-meta';
+import { initWebEnv, initWebSetting } from '../lib/web-env';
+import { _lupineJs, PageProps, PageResultType, setRenderPageProps } from './export-lupine';
+import { isFrontEnd } from '../lib/is-frontend';
 
-export type JsonKeyValue = {
-  [key: string]: string | number | boolean | null | undefined | JsonKeyValue | JsonKeyValue[];
-};
-export type JsonObject =
-  | JsonKeyValue[]
-  | {
-      [key: string]: string | number | boolean | null | undefined | JsonKeyValue | JsonKeyValue[];
-    };
-
-export type RenderPageFunctionsType = {
-  fetchData: (url: string, postBody?: string | JsonObject, returnRawResponse?: boolean) => Promise<any>;
-  [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: (props: any, toClientDelivery: IToClientDelivery) => Promise<PageResultType>;
-  renderPageFunctions: RenderPageFunctionsType;
-  router: PageRouter | ((props: PageProps) => Promise<VNode<any>>);
-  renderPageProps: PageProps;
-};
-
-const logger = new Logger('core');
-export const _lupineJs: _LupineJs = {} as _LupineJs;
-
-// for SSR, it exports _lupineJs function for the server to call
-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
-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;
-};
-
-export const isFrontEnd = () => {
-  return typeof window === 'object' && typeof document === 'object';
-};
+const logger = new Logger('initialize');
 
 const renderTargetPage = async (props: PageProps, renderPartPage: boolean) => {
   if (_lupineJs.router instanceof PageRouter) {
@@ -91,7 +22,7 @@ const renderTargetPage = async (props: PageProps, renderPartPage: boolean) => {
 };
 
 // this is called by server side for SSR (server-side-rendering)
-export const generatePage = async (props: PageProps, toClientDelivery: IToClientDelivery): Promise<PageResultType> => {
+const generatePage = async (props: PageProps, toClientDelivery: IToClientDelivery): Promise<PageResultType> => {
   setRenderPageProps(props);
 
   initWebEnv(toClientDelivery.getWebEnv());
@@ -118,7 +49,7 @@ export const generatePage = async (props: PageProps, toClientDelivery: IToClient
 
   return {
     content,
-    title: getMetaTitle(),
+    title: getPageTitle(),
     metaData: getMetaDataTags(),
     globalCss: cssText,
     themeName: currentTheme.themeName,
@@ -128,6 +59,7 @@ _lupineJs.generatePage = generatePage;
 
 let _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 = _pageInitialized;
   _pageInitialized = true;
@@ -165,11 +97,11 @@ export const initializePage = async (newUrl?: string) => {
   updateTheme(getCurrentTheme().themeName);
 
   // title
-  document.title = getMetaTitle();
+  document.title = getPageTitle();
   const metaData = getMetaDataObject();
   // meta data?
 };
-if (typeof window !== 'undefined') {
+if (isFrontEnd()) {
   addEventListener('popstate', (event) => {
     initializePage();
   });
@@ -177,3 +109,4 @@ if (typeof window !== 'undefined') {
     initializePage();
   });
 }
+_lupineJs.initializePage = initializePage;

package/src/core/page-router.ts

@@ -1,7 +1,8 @@
 import { VNode } from '../jsx';
-import { Logger } from '../lib';
-import { isFrontEnd, PageProps } from './core';
+import { isFrontEnd } from '../lib/is-frontend';
+import { PageProps } from './export-lupine';
 import { mountComponents } from './mount-components';
+import { Logger } from '../lib/logger';
 
 export type PageRouterCallback = (props: PageProps) => Promise<VNode<any> | null>;
 

package/src/core/server-cookie.ts

@@ -1,13 +1,14 @@
-import { DomUtils } from '../lib';
+import { getCookie } from '../lib/cookie';
 import { ISimpleStorage } from '../models/simple-storage-props';
+import { isFrontEnd } from '../lib/is-frontend';
 
 // getEitherCookie can be used in both FE and SSR
 export const getEitherCookie = (name: string) => {
-  if (typeof window === 'undefined') {
+  if (!isFrontEnd()) {
     // SSR
     return getServerCookie(name);
   } else {
-    return DomUtils.getCookie(name);
+    return getCookie(name);
   }
 };
 
@@ -17,6 +18,7 @@ export const getServerCookie = (name: string) => {
   return _serverCookies && _serverCookies.get(name, '');
 };
 // TODO: Server cookies safety should be OK? as this is dropped after SSR
+// This is called by server side to initialize cookies for SSR
 export const initServerCookies = (serverCookies: ISimpleStorage) => {
   return (_serverCookies = serverCookies);
 };

package/src/index.ts

@@ -4,9 +4,8 @@ import { JSXInternal } from './jsx';
 export * from './jsx';
 export * from './core';
 export * from './lib';
-export * from './components';
-export * from './types';
-export * from './assets/themes';
+export * from './models';
+export * from './styles';
 
 declare global {
   namespace JSX {

package/src/lib/index.ts

@@ -1,17 +1,6 @@
-export * from './dom';
-export * from './date-utils';
+export * from './cookie';
 export * from './debug-watch';
-export * from './deep-merge';
-export * from './document-ready';
-export * from './dynamical-load';
-export * from './format-bytes';
-export * from './lite-dom';
+export * from './is-frontend';
 export * from './logger';
-export * from './message-hub';
-export * from './observable';
-export * from './promise-timeout';
-export * from './simple-storage';
-export * from './stop-propagation';
 export * from './unique-id';
-export * from './upload-file';
 export * from './web-env';

package/src/lib/is-frontend.ts

@@ -0,0 +1,3 @@
+export const isFrontEnd = () => {
+  return typeof window === 'object' && typeof document === 'object';
+};

package/src/models/index.ts

@@ -1,2 +1,4 @@
+export * from './json-props';
 export * from './simple-storage-props';
+export * from './theme-props';
 export * from './to-client-delivery-props';

package/src/models/json-props.ts

@@ -0,0 +1,8 @@
+export type JsonKeyValue = {
+  [key: string]: string | number | boolean | null | undefined | JsonKeyValue | JsonKeyValue[];
+};
+export type JsonObject =
+  | JsonKeyValue[]
+  | {
+      [key: string]: string | number | boolean | null | undefined | JsonKeyValue | JsonKeyValue[];
+    };

package/src/models/theme-props.ts

@@ -0,0 +1,7 @@
+export type ThemeProps = {
+  [key: string]: string | number;
+};
+
+export type ThemesProps = {
+  [key: string]: ThemeProps;
+};

package/src/{types → styles}/index.ts

@@ -2,5 +2,3 @@ import { CssProps } from '../jsx';
 export { CssProps as CSS };
 
 export * from './css-styles';
-export * from './css-types';
-export * from './media-query';

package/src/assets/themes/base-themes.ts

@@ -1,16 +0,0 @@
-import { darkThemes } from './dark-themes';
-import { lightThemes } from './light-themes';
-
-export const baseThemes: { [key: string]: { [key: string]: string } } = {
-  light: lightThemes,
-  dark: darkThemes,
-  lightGreen: {
-    ...lightThemes,
-    '--background-primary': '#d8ffe3', //	Primary background
-    '--color-primary': '#303030', //	Primary text color
-    backgroundPrimary: '', //	Primary background
-    backgroundOnPrimary: '', //	Background for surfaces on top of primary background
-    backgroundSecondary: '#f5f5f7', //	Secondary background
-    backgroundOnSecondary: '#e5e5e7', //	Background for surfaces on top of secondary background
-  },
-};

package/src/assets/themes/dark-themes.ts

@@ -1,85 +0,0 @@
-import { sharedThemes } from './shared-themes';
-
-export const darkThemes: { [key: string]: string } = {
-  ...sharedThemes,
-  '--theme-name': 'dark',
-
-  '--scrollbar-bg': '#1c1c1c',
-  '--scrollbar-thumb-bg': '#373636',
-  '--scrollbar-active-thumb-bg': '#5b5b5b',
-
-  '--primary-color': '#aeaeae',
-  '--primary-color-disabled': '#7d7d7d',
-  '--primary-bg-color': '#000000',
-  '--primary-border-color': '#aeaeae',
-  '--primary-border': '1px solid var(--primary-border-color)',
-  // '--secondary-color': '#b3b3b3',
-  // '--secondary-bg-color': '#151515',
-  // '--secondary-border': '1px solid #303030',
-  '--primary-opacity': '0.5', // used for dark theme
-  '--primary-disabled-opacity': '0.7', // used for dark theme
-  '--primary-accent-color': '#0c3c63', // used for radio and checkbox's background color
-
-  // including menus, tabs
-  '--activatable-color-normal': 'var(--primary-color)',
-  '--activatable-bg-color-normal': 'var(--primary-bg-color)',
-  '--activatable-color-hover': '#e2e2e2',
-  '--activatable-bg-color-hover': '#6d6d6d',
-  '--activatable-color-selected': '#c2c2c2',
-  '--activatable-bg-color-selected': '#5d5d5d',
-  // '--menu-color-hover': '#303030',
-  // '--menu-color': 'var(--primary-color)',  //'#2a2a2a',
-  // '--menu-bg-color': 'var(--primary-bg-color)',  //'#2a2a2a',
-  // '--menu-bg-color-hover': '#a0a0a0',
-  '--menu-font-size': '1rem',
-  '--menubar-color': '#eeeeee',
-  '--menubar-bg-color': '#000000',
-  '--menubar-sub-bg-color': '#f9f9f9',
-  '--sidebar-color': 'var(--primary-color)',
-  '--sidebar-bg-color': '#000000',
-  // '--sidebar-sub-color': 'var(--sidebar-color)',
-  // '--sidebar-sub-bg-color': '#000000',
-  '--sidebar-border': '1px solid #303030',
-  // '--sidebar-hover-color': 'var(--sidebar-color)',
-  // '--sidebar-hover-bg-color': '#000000',
-
-  '--row-1-bg-color': '#212121',
-  '--row-2-bg-color': '#303030',
-  '--row-hover-bg-color': '#383838',
-
-  '--success-color': '#04AA6D',
-  '--info-color': '#2196F3',
-  '--warning-color': '#ff9800',
-  '--error-color': '#f44336',
-  '--success-bg-color': '#10553b',
-  '--info-bg-color': '#1a588a',
-  '--warning-bg-color': '#a36305',
-  '--error-bg-color': '#882c25',
-  '--notice-color-with-bg': '#ececec',
-
-  '--cover-mask-bg-color': '#878a9460',
-  '--cover-bg-color': '#202020',
-  '--cover-box-shadow': '1px 1px 4px #c6c6c6',
-
-  '--input-color': '#bdbdbd',
-  '--input-bg-color': '#000000',
-  '--input-box-shadow': '0px 0px 0px #000000, 1px 1px 0px 0px #50505045',
-  '--input-border-focus': '1px solid #0074d9',
-
-  '--button-color': '#bdbdbd',
-  '--button-bg': '-webkit-linear-gradient(top, #282828 0%, #212223 74%, #1a1a1a 100%)', // darker
-  '--button-bg-hover': '-webkit-linear-gradient(top, #282828 0%, #313233 74%, #252525 100%)', // darker
-  // '--button-bg': '-webkit-linear-gradient(top, #414141 0%, #373e48 74%, #434242 100%)',
-  '--button-border': '1px solid #373e48',
-  '--button-box-shadow': 'unset',
-
-  '--header-color': '#000080',
-  '--header-bg-color': '#000000',
-
-  // '--background-primary': '#353536', //	Primary background
-  // '--color-primary': '#e0e0e0', //	Primary text color
-  // backgroundPrimary: '', //	Primary background
-  // backgroundOnPrimary: '', //	Background for surfaces on top of primary background
-  // backgroundSecondary: '#f5f5f6', //	Secondary background
-  // backgroundOnSecondary: '#e5e5e6', //	Background for surfaces on top of secondary background
-};

package/src/assets/themes/index.ts

@@ -1,4 +0,0 @@
-export * from './shared-themes';
-export * from './dark-themes';
-export * from './light-themes';
-export * from './base-themes';