lupine.web 1.0.16 → 1.0.18

package/package.json

@@ -1,14 +1,10 @@
 {
   "name": "lupine.web",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "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-styles.ts

@@ -159,10 +159,11 @@ if (typeof document !== 'undefined') {
   });
 }
 
-const clearGlobalStyles = () => {
-  // reset unique id
-  _globalStyle.clear();
-};
+// 不能清空，在index.tsx中加载的只会被加载一次，清空了就没有了
+// const clearGlobalStyles = () => {
+//   // reset unique id
+//   _globalStyle.clear();
+// };
 // bindPageResetEvent(clearGlobalStyles);
 
 export const generateAllGlobalStyles = () => {
@@ -175,6 +176,6 @@ export const generateAllGlobalStyles = () => {
     result.push(`<style id="sty-${uniqueStyleId}">${cssText}</style>`);
   }
 
-  clearGlobalStyles();
+  // clearGlobalStyles();
   return result.join('');
 };

package/src/core/bind-theme.ts

@@ -1,5 +1,6 @@
-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
@@ -21,8 +22,8 @@ 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 };
@@ -31,11 +32,11 @@ export const getCurrentTheme = () => {
 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

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

@@ -5,7 +5,7 @@ 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';
@@ -14,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,5 +1,3 @@
-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';
@@ -8,71 +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, JsonObject } from '../models';
+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 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) {
@@ -82,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());
@@ -119,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;
@@ -160,7 +101,7 @@ export const initializePage = async (newUrl?: string) => {
   const metaData = getMetaDataObject();
   // meta data?
 };
-if (typeof window !== 'undefined') {
+if (isFrontEnd()) {
   addEventListener('popstate', (event) => {
     initializePage();
   });
@@ -168,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,7 +4,6 @@ import { JSXInternal } from './jsx';
 export * from './jsx';
 export * from './core';
 export * from './lib';
-export * from './components';
 export * from './models';
 export * from './styles';
 

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/styles/index.ts

@@ -2,8 +2,3 @@ import { CssProps } from '../jsx';
 export { CssProps as CSS };
 
 export * from './css-styles';
-export * from './media-query';
-export * from './shared-themes';
-export * from './dark-themes';
-export * from './light-themes';
-export * from './base-themes';

package/src/components/button-push-animation.tsx

@@ -1,138 +0,0 @@
-import { CssProps, RefProps } from 'lupine.web';
-
-export enum ButtonPushAnimationSize {
-  SmallSmall = 'button-ss',
-  Small = 'button-s',
-  Medium = 'button-m',
-  Large = 'button-l',
-  LargeLarge = 'button-ll',
-}
-export type ButtonPushAnimationHookProps = {
-  setEnabled?: (enabled: boolean) => void;
-  getEnabled?: () => boolean;
-};
-export type ButtonPushAnimationProps = {
-  text: string;
-  size: ButtonPushAnimationSize;
-  disabled?: boolean;
-  onClick?: () => void;
-  hook?: ButtonPushAnimationHookProps;
-  class?: string;
-  css?: CssProps;
-};
-export const ButtonPushAnimation = (props: ButtonPushAnimationProps) => {
-  let disabled = props.disabled || false;
-  const onClick = () => {
-    if (disabled) {
-      return;
-    }
-    if (props.onClick) {
-      props.onClick();
-    }
-  };
-  if (props.hook) {
-    props.hook.setEnabled = (enabled: boolean) => {
-      disabled = !enabled;
-      ref.current.disabled = disabled;
-    };
-    props.hook.getEnabled = () => {
-      return !disabled;
-    };
-  }
-
-  const ref: RefProps = {};
-  const css: CssProps = {
-    all: 'unset',
-    cursor: 'pointer',
-    '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
-    position: 'relative',
-    borderRadius: 'var(--border-radius-m)',
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
-    boxShadow: '-0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25), 0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1)',
-    '.button-outer': {
-      position: 'relative',
-      zIndex: 1,
-      borderRadius: 'inherit',
-      transition: 'box-shadow 300ms ease',
-      willChange: 'box-shadow',
-      boxShadow: '0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1), 0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5), 0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25)',
-    },
-    '.button-inner': {
-      position: 'relative',
-      zIndex: 2,
-      borderRadius: 'inherit',
-      padding: 'var(--button-padding)',
-      background: 'linear-gradient(135deg, #ffffff, #eeeeee)',
-      transition: 'box-shadow 300ms ease, background-image 250ms ease, transform 250ms ease;',
-      willChange: 'box-shadow, background-image, transform',
-      overflow: 'clip',
-      // clipPath: 'inset(0 0 0 0 round 999vw)',
-      boxShadow: '0 0 0 0 inset rgba(5, 5, 5, 0.1), -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25), 0 0 0 0 inset rgba(5, 5, 5, 0.1), 0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25), 0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25)',
-    },
-    '.button-inner span': {
-      position: 'relative',
-      zIndex: 4,
-      // fontFamily: 'Inter, sans-serif',
-      letterSpacing: '-0.05em',
-      // fontWeight: 500,
-      color: 'rgba(0, 0, 0, 0);',
-      backgroundImage: 'linear-gradient(135deg, rgba(25, 25, 25, 1), rgba(75, 75, 75, 1))',
-      backgroundClip: 'text',
-      transition: 'transform 250ms ease',
-      display: 'block',
-      willChange: 'transform',
-      textShadow: 'rgba(0, 0, 0, 0.1) 0 0 0.1em',
-      userSelect: 'none',
-    },
-    '&.button-ss': {
-      borderRadius: '2px',
-    },
-    '&.button-s': {
-      borderRadius: '3px',
-    },
-    '&.button-l': {
-      borderRadius: '6px',
-    },
-    '&.button-ll': {
-      borderRadius: '10px',
-    },
-    '&.button-ss .button-inner': {
-      padding: '0.1rem 0.3rem',
-      fontSize: '0.65rem',
-    },
-    '&.button-s .button-inner': {
-      padding: '0.2rem 0.5rem',
-      fontSize: '0.85rem',
-    },
-    '&.button-l .button-inner': {
-      padding: '0.4rem 1.2rem',
-      fontSize: '1.5rem',
-    },
-    '&.button-ll .button-inner': {
-      padding: '0.5rem 1.5rem',
-      fontSize: '2rem',
-    },
-    '&:active .button-outer': {
-      boxShadow: '0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5), 0 0 0 0 rgba(5, 5, 5, 0.25)',
-    },
-    '&:active .button-inner': {
-      boxShadow: '0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75), -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5), 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5), 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15), 0 0 0 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25)',
-    },
-    '&:hover .button-inner': {
-      transform: 'scale(0.99)',
-    },
-    '&:hover .button-inner span': {
-      transform: 'scale(0.975)',
-    },
-    ...props.css,
-  };
-  return (
-    <button ref={ref} css={css} class={['button-push-animation', props.size, props.class].join(' ')} disabled={disabled} onClick={onClick}>
-      <div class="button-outer">
-        <div class="button-inner">
-          <span>{props.text}</span>
-        </div>
-      </div>
-    </button>
-  );
-};

package/src/components/button.tsx

@@ -1,55 +0,0 @@
-import { CssProps, RefProps } from 'lupine.web';
-
-export enum ButtonSize {
-  SmallLarge = 'button-ss',
-  Small = 'button-s',
-  Medium = 'button-m',
-  Large = 'button-l',
-  LargeLarge = 'button-ll',
-}
-export type ButtonHookProps = {
-  setEnabled?: (enabled: boolean) => void;
-  getEnabled?: () => boolean;
-};
-export type ButtonProps = {
-  text: string;
-  size: ButtonSize;
-  disabled?: boolean;
-  onClick?: () => void;
-  hook?: ButtonHookProps;
-  class?: string;
-  css?: CssProps;
-};
-export const Button = (props: ButtonProps) => {
-  let disabled = props.disabled || false;
-  const onClick = () => {
-    if (disabled) {
-      return;
-    }
-    if (props.onClick) {
-      props.onClick();
-    }
-  };
-  if (props.hook) {
-    props.hook.setEnabled = (enabled: boolean) => {
-      disabled = !enabled;
-      ref.current.disabled = disabled;
-    };
-    props.hook.getEnabled = () => {
-      return !disabled;
-    };
-  }
-
-  const ref: RefProps = {};
-  return (
-    <button
-      ref={ref}
-      class={['button-base', props.size, props.class].join(' ')}
-      css={props.css}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      {props.text}
-    </button>
-  );
-};