lupine.web 1.0.14 → 1.0.16

package/README.md

@@ -1,3 +1,3 @@
-# lupine.js
+# 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/jsx-runtime/package.json

@@ -3,7 +3,7 @@
   "amdName": "jsxRuntime",
   "version": "1.0.0",
   "private": true,
-  "description": "Lupine.js JSX runtime",
+  "description": "lupine.web JSX runtime",
   "main": "index.js",
   "module": "index.js",
   "umd:main": "index.js",
@@ -11,6 +11,6 @@
   "types": "src/index.d.ts",
   "license": "MIT",
   "peerDependencies": {
-    "lupine.js": "^1.0.0"
+    "lupine.web": "^1.0.0"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.web",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://uuware.com/",

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

@@ -1,4 +1,4 @@
-import { CssProps, RefProps } from 'lupine.js';
+import { CssProps, RefProps } from 'lupine.web';
 
 export enum ButtonPushAnimationSize {
   SmallSmall = 'button-ss',

package/src/components/button.tsx

@@ -1,4 +1,4 @@
-import { CssProps, RefProps } from 'lupine.js';
+import { CssProps, RefProps } from 'lupine.web';
 
 export enum ButtonSize {
   SmallLarge = 'button-ss',

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/popup-menu.tsx

@@ -1,4 +1,4 @@
-import { RefProps, stopPropagation } from 'lupine.js';
+import { RefProps, stopPropagation } from 'lupine.web';
 
 export type PopupMenuOpenMenuProps = { handle?: Function };
 

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/components/toggle-base.tsx

@@ -1,4 +1,4 @@
-import { CssProps, RefProps, VNode } from 'lupine.js';
+import { CssProps, RefProps, VNode } from 'lupine.web';
 
 export const PlayButtonSize = {
   Small: { w: 50, h: 50 },

package/src/components/toggle-switch.tsx

@@ -1,4 +1,4 @@
-import { bindGlobalStyles, CssProps } from 'lupine.js';
+import { bindGlobalStyles, CssProps } from 'lupine.web';
 import { ToggleBase, ToggleBaseHookProps } from './toggle-base';
 
 export enum ToggleSwitchSize {

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/jsx.ts

@@ -2,7 +2,7 @@
 // Users who only use Preact for SSR might not specify "dom" in their lib in tsconfig.json
 /// <reference lib="dom" />
 
-// used by lupine.js
+// used by lupine.web
 export type CssProps = {
   [key: string]: string | number | null | undefined | CssProps;
 };

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/tsconfig.json

@@ -23,7 +23,7 @@
     "emitDecoratorMetadata": true /* Emit design-type metadata for decorated declarations in source files. */,
     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
     // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-    "jsxImportSource": "lupine.js" /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */,
+    "jsxImportSource": "lupine.web" /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */,
     // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
@@ -39,7 +39,7 @@
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
-    "types": ["node", "lupine.js"],
+    "types": ["node", "lupine.web"],
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
     // "resolveJsonModule": true /* Enable importing .json files. */,

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