lupine.web 1.0.15 → 1.0.16

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,6 +1,6 @@
 {
   "name": "lupine.web",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://uuware.com/",

package/src/components/menu-bar.tsx

@@ -1,6 +1,6 @@
 import { getRenderPageProps } from '../core';
 import { RefProps } from '../jsx';
-import { MediaQueryMaxWidth } from '../types';
+import { MediaQueryMaxWidth } from '../styles';
 import { LinkItem } from './link-item';
 import { NestMenuItemProps } from './menu-item-props';
 

package/src/components/menu-sidebar.tsx

@@ -1,7 +1,7 @@
 import { bindGlobalStyles, getRenderPageProps } from '../core';
 import { CssProps, RefProps } from '../jsx';
 import { stopPropagation } from '../lib';
-import { MediaQueryMaxWidth } from '../types';
+import { MediaQueryMaxWidth } from '../styles';
 import { NestMenuItemProps } from './menu-item-props';
 
 const fetchMenu = async (menuId: string) => {

package/src/components/meta-data.tsx

@@ -1,6 +1,5 @@
 // import { bindPageResetEvent } from '../core/page-reset-events';
-import { getMetaDescription } from './meta-description';
-
+import { addMetaDataTags } from '../core/bind-meta';
 type NameMeta = { name: string; content: string };
 type PropertyMeta = { property: string; content: string };
 type HttpEquivMeta = { httpEquiv: string; content: string };
@@ -16,39 +15,22 @@ function isHttpEquivMeta(data: any): data is HttpEquivMeta {
   return !!(data.httpEquiv && data.content);
 }
 
-let _metaData: { [key: string]: string } = {};
-// Shouldn't include <meta name="description" content="...">
+// should use description tag instead of meta tag ( <meta name="description" content="..."> )
 export const MetaData = (data: AllMeta) => {
   if (isNameMeta(data)) {
-    _metaData[`name:${data.name}`] = `<meta name="${data.name}" content="${data.content}">`;
+    addMetaDataTags(`name:${data.name}`, `<meta name="${data.name}" content="${data.content}">`);
   } else if (isPropertyMeta(data)) {
-    _metaData[`property:${data.property}`] = `<meta property="${data.property}" content="${data.content}">`;
+    addMetaDataTags(`property:${data.property}`, `<meta property="${data.property}" content="${data.content}">`);
   } else if (isHttpEquivMeta(data)) {
-    _metaData[`http-equiv:${data.httpEquiv}`] = `<meta http-equiv="${data.httpEquiv}" content="${data.content}">`;
+    addMetaDataTags(`http-equiv:${data.httpEquiv}`, `<meta http-equiv="${data.httpEquiv}" content="${data.content}">`);
   } else if ((data as any).key && (data as any).string) {
-    _metaData[`${(data as any).key}`] = `${(data as any).string}`;
+    addMetaDataTags(`${(data as any).key}`, `${(data as any).string}`);
   } else {
     console.warn('Unknown meta data:', data);
   }
   return <></>;
 };
 
-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;
-};
-
 // bindPageResetEvent(() => {
 //   _metaData = {};
 // });

package/src/components/meta-description.tsx

@@ -1,19 +1,12 @@
 // import { bindPageResetEvent } from '../core/page-reset-events';
 
-let _description = { value: '', defaultValue: '' };
+import { addMetaDataTags } from "../core/bind-meta";
+
 export const MetaDescription = ({ children }: { children: string }) => {
-  _description.value = children;
+  addMetaDataTags('name:description', `<meta name="description" content="${children}">`);
   return <></>;
 };
 
-export const getMetaDescription = () => {
-  return _description.value || _description.defaultValue;
-};
-
-export const setDefaultMetaDescription = (children: string) => {
-  _description.defaultValue = children;
-};
-
 // bindPageResetEvent(() => {
 //   _description.value = '';
 // });

package/src/components/page-title.tsx

@@ -0,0 +1,6 @@
+import { setPageTitle } from "../core/bind-meta";
+
+export const PageTitle = ({ children }: { children: string }) => {
+  setPageTitle(children);
+  return <></>;
+};

package/src/components/panel.tsx

@@ -1,10 +1,8 @@
-import { CssProps, JSXInternal } from '../jsx';
-import { ContentPosition, Position } from '../types';
+import { CssProps } from '../jsx';
 
 export type PanelProps = {
   children: any;
   className?: string;
-  contentPosition?: ContentPosition;
   css?: CssProps;
 };
 
@@ -12,7 +10,6 @@ export const Panel = ({ children, className, css }: PanelProps) => {
   const newCss: CssProps = {
     display: 'flex',
     flexDirection: 'column',
-    // justifyContent: ContentPosition.center,
     ...css,
   };
 

package/src/components/tabs.tsx

@@ -1,4 +1,4 @@
-import { mountComponents, mountSelfComponents } from '../core';
+import { mountComponents } from '../core';
 import { RefProps, VNode } from '../jsx';
 import { stopPropagation } from '../lib';
 

package/src/components/theme-selector.tsx

@@ -1,11 +1,9 @@
 import { bindGlobalStyles, getCurrentTheme, updateTheme } from '../core';
 import { CssProps } from '../jsx';
-import { ContentPosition } from '../types';
 import { PopupMenu } from './popup-menu';
 
 export type ThemeSelectorProps = {
   className?: string;
-  contentPosition?: ContentPosition;
   css?: CssProps;
 };
 
@@ -14,7 +12,6 @@ export const ThemeSelector = ({ className, css }: ThemeSelectorProps) => {
     display: 'flex',
     flexDirection: 'column',
     alignSelf: 'end',
-    // justifyContent: ContentPosition.center,
     ...css,
   };
 

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,5 @@
-import { CssProps } from '../jsx';
 import { DomUtils } from '../lib';
+import { ThemesProps } from '../models';
 import { getEitherCookie } from './server-cookie';
 
 // theme doesn't need to reset, theme name is stored in cookie
@@ -8,8 +8,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;
 
@@ -25,7 +25,7 @@ export const getCurrentTheme = () => {
       DomUtils.setCookie(themeCookieName, _themeCfg.defaultTheme);
     }
   }
-  return { themeName, themes: _themeCfg.themes as { [key: string]: CssProps } };
+  return { themeName, themes: _themeCfg.themes };
 };
 
 export const updateTheme = (themeName: string) => {
@@ -39,6 +39,7 @@ export const updateTheme = (themeName: string) => {
   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/core.ts

@@ -1,4 +1,3 @@
-import { getMetaDataObject, getMetaDataTags, getMetaTitle } from '../components';
 import { VNode } from '../jsx';
 import { initWebEnv, initWebSetting } from '../lib';
 import { Logger } from '../lib/logger';
@@ -9,16 +8,8 @@ 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';
-
-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[];
-    };
+import { IToClientDelivery, JsonObject } from '../models';
+import { getMetaDataObject, getMetaDataTags, getPageTitle } from './bind-meta';
 
 export type RenderPageFunctionsType = {
   fetchData: (url: string, postBody?: string | JsonObject, returnRawResponse?: boolean) => Promise<any>;
@@ -118,7 +109,7 @@ export const generatePage = async (props: PageProps, toClientDelivery: IToClient
 
   return {
     content,
-    title: getMetaTitle(),
+    title: getPageTitle(),
     metaData: getMetaDataTags(),
     globalCss: cssText,
     themeName: currentTheme.themeName,
@@ -165,7 +156,7 @@ export const initializePage = async (newUrl?: string) => {
   updateTheme(getCurrentTheme().themeName);
 
   // title
-  document.title = getMetaTitle();
+  document.title = getPageTitle();
   const metaData = getMetaDataObject();
   // meta data?
 };

package/src/core/index.ts

@@ -1,6 +1,7 @@
 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';

package/src/index.ts

@@ -5,8 +5,8 @@ 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/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/{assets/themes → styles}/base-themes.ts

@@ -1,7 +1,8 @@
+import { ThemesProps } from '../models';
 import { darkThemes } from './dark-themes';
 import { lightThemes } from './light-themes';
 
-export const baseThemes: { [key: string]: { [key: string]: string } } = {
+export const baseThemes: ThemesProps = {
   light: lightThemes,
   dark: darkThemes,
   lightGreen: {

package/src/{assets/themes → styles}/dark-themes.ts

@@ -1,6 +1,7 @@
 import { sharedThemes } from './shared-themes';
+import { ThemeProps } from '../models';
 
-export const darkThemes: { [key: string]: string } = {
+export const darkThemes: ThemeProps = {
   ...sharedThemes,
   '--theme-name': 'dark',
 

package/src/styles/index.ts

@@ -0,0 +1,9 @@
+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/{assets/themes → styles}/light-themes.ts

@@ -1,6 +1,7 @@
 import { sharedThemes } from './shared-themes';
+import { ThemeProps } from '../models';
 
-export const lightThemes: { [key: string]: string } = {
+export const lightThemes: ThemeProps = {
   ...sharedThemes,
   '--theme-name': 'light',
 

package/src/{assets/themes → styles}/shared-themes.ts

@@ -1,4 +1,6 @@
-export const sharedThemes: { [key: string]: string } = {
+import { ThemeProps } from "../models";
+
+export const sharedThemes: ThemeProps = {
   // z-index
   '--layer-cover': '10',
   '--layer-sidebar': '100',

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';

package/src/components/meta-title.tsx

@@ -1,19 +0,0 @@
-// import { bindPageResetEvent } from '../core/page-reset-events';
-
-let _title = { value: '', defaultValue: '' };
-export const MetaTitle = ({ children }: { children: string }) => {
-  _title.value = children;
-  return <></>;
-};
-
-export const getMetaTitle = () => {
-  return _title.value || _title.defaultValue;
-};
-
-export const setDefaultMetaTitle = (children: string) => {
-  _title.defaultValue = children;
-};
-
-// bindPageResetEvent(() => {
-//   _title.value = '';
-// });

package/src/types/css-types.ts

@@ -1,17 +0,0 @@
-export enum ContentPosition {
-  center = 'center',
-  end = 'end',
-  flexEnd = 'flex-end',
-  flexStart = 'flex-start',
-  start = 'start',
-}
-
-export type SelfPosition = 'center' | 'end' | 'flex-end' | 'flex-start' | 'self-end' | 'self-start' | 'start';
-
-export enum Position {
-  absolute = 'absolute',
-  fixed = 'fixed',
-  relative = 'relative',
-  static = 'static',
-  sticky = 'sticky',
-}

package/src/types/index.ts

@@ -1,6 +0,0 @@
-import { CssProps } from '../jsx';
-export { CssProps as CSS };
-
-export * from './css-styles';
-export * from './css-types';
-export * from './media-query';