lupine.web 1.1.4 → 1.1.5

package/README.md

@@ -1,3 +1,66 @@
-# lupine.web
-
-lupine.web is a React-like, extremely fast, small size and lightweight frontend framework.
+# lupine.web
+
+**lupine.web** is a React-like, extremely fast, small-size, and lightweight frontend framework designed for modern web development. It focuses on performance, simplicity, and a full-stack experience when paired with `lupine.api`.
+
+## Why lupine.web?
+
+### 🚀 Zero-Dependency & Lightweight
+
+We believe in keeping things simple. `lupine.web` has **zero external dependencies**, resulting in a tiny bundle size and lightning-fast load times. It uses TSX syntax, so if you know React, you already feel at home.
+
+### 🎨 Built-in CSS-in-JS
+
+Forget about setting up complex CSS loaders or external styling libraries. `lupine.web` comes with a powerful, built-in CSS-in-JS solution.
+
+- **Scoped Styles**: Styles are automatically scoped to your components to prevent collisions.
+- **Nesting Support**: Write cleaner CSS with nested selectors (e.g., `&:hover`, `& > span`).
+- **Theming**: Native support for light/dark modes and custom themes.
+
+```tsx
+const MyButton = (props) => (
+  <button
+    css={{
+      backgroundColor: 'blue',
+      color: 'white',
+      '&:hover': { backgroundColor: 'darkblue' },
+      [MediaQueryRange.Mobile]: { width: '100%' },
+    }}
+  >
+    {props.children}
+  </button>
+);
+```
+
+### 🛣️ Powerful Router
+
+Our functional router is designed for flexibility and control.
+
+- **Route Guards**: Easily implement authentication checks or permissions.
+- **Nested Routes**: Organize your application with sub-routers for modular architecture.
+- **SSR Ready**: Routes work seamlessly on both server and client.
+
+```typescript
+const pageRouter = new PageRouter();
+// Middleware/Guard example
+pageRouter.setFilter(async (props) => {
+  if (!checkAuth(props)) return <Redirect to='/login' />;
+  return null; // Pass
+});
+pageRouter.use('/dashboard/*', DashboardRouter);
+```
+
+### ⚡ Server-Side Rendering (SSR) First
+
+Visual performance is critical. `lupine.web` is built with SSR in mind from day one.
+
+- **No Flashing**: Content is rendered on the server, ensuring users see the page immediately.
+- **SEO Friendly**: Fully customizable Metadata and Open Graph (OG) tags for social sharing.
+- **Hydration**: The client takes over smoothly without re-rendering the entire tree.
+
+### 🌍 Internationalization (i18n)
+
+Go global with ease. Built-in support for multi-language applications allows you to switch languages dynamically without complex configuration.
+
+### 🛠️ Environment Configuration
+
+Manage your application environments efficiently. `lupine.web` supports loading environment variables (from `.env` files via `lupine.api`) and injecting strictly filtered configurations into the frontend.

package/jsx-runtime/index.js

@@ -1,14 +1,14 @@
-/**
- * JSX.Element factory used by Typescript's JSX transform
- * @param type
- * @param props
- */
-function jsx(type, props) {
-  return { type, props };
-}
-
-function Fragment(props) {
-  return { type: 'Fragment', props };
-}
-
-export { jsx as jsx, jsx as jsxs, jsx as jsxDEV, Fragment };
+/**
+ * JSX.Element factory used by Typescript's JSX transform
+ * @param type
+ * @param props
+ */
+function jsx(type, props) {
+  return { type, props };
+}
+
+function Fragment(props) {
+  return { type: 'Fragment', props };
+}
+
+export { jsx as jsx, jsx as jsxs, jsx as jsxDEV, Fragment };

package/jsx-runtime/package.json

@@ -1,16 +1,16 @@
-{
-  "name": "jsx-runtime",
-  "amdName": "jsxRuntime",
-  "version": "1.0.0",
-  "private": true,
-  "description": "lupine.web JSX runtime",
-  "main": "index.js",
-  "module": "index.js",
-  "umd:main": "index.js",
-  "source": "index.js",
-  "types": "src/index.d.ts",
-  "license": "MIT",
-  "peerDependencies": {
-    "lupine.web": "^1.0.0"
-  }
-}
+{
+  "name": "jsx-runtime",
+  "amdName": "jsxRuntime",
+  "version": "1.0.0",
+  "private": true,
+  "description": "lupine.web JSX runtime",
+  "main": "index.js",
+  "module": "index.js",
+  "umd:main": "index.js",
+  "source": "index.js",
+  "types": "src/index.d.ts",
+  "license": "MIT",
+  "peerDependencies": {
+    "lupine.web": "^1.0.0"
+  }
+}

package/jsx-runtime/src/index.d.ts

@@ -1,2 +1,2 @@
-import { JSXInternal } from '../../src/jsx';
-export { JSXInternal as JSX };
+import { JSXInternal } from '../../src/jsx';
+export { JSXInternal as JSX };

package/package.json

@@ -1,52 +1,53 @@
-{
-  "name": "lupine.web",
-  "version": "1.1.4",
-  "license": "MIT",
-  "author": "uuware.com",
-  "homepage": "https://github.com/uuware/lupine.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/uuware/lupine.js.git",
-    "directory": "packages/lupine.web"
-  },
-  "description": "lupine.web is a extremely fast, small size and lightweight frontend framework, using React TSX syntax.",
-  "main": "src/index.ts",
-  "source": "src/index.ts",
-  "types": "src/index.ts",
-  "engines": {
-    "node": ">= 20"
-  },
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "browser": "./src/index.ts",
-      "umd": "./src/index.ts",
-      "import": "./src/index.ts",
-      "require": "./src/index.ts"
-    },
-    "./jsx-runtime": {
-      "types": "./jsx-runtime/src/index.d.ts",
-      "browser": "./jsx-runtime/index.js",
-      "umd": "./jsx-runtime/index.js",
-      "import": "./jsx-runtime/index.js",
-      "require": "./jsx-runtime/index.js"
-    }
-  },
-  "keywords": [
-    "frontend",
-    "responsive",
-    "lightweight",
-    "grid"
-  ],
-  "scripts": {
-    "note": "echo 'build is not needed as the typescript code is supposed to be referred directly from other projects'",
-    "npm-publish": "npm publish --access public",
-    "build": "tsc"
-  },
-  "peerDependencies": {
-    "jsx-runtime": "^1.0.0"
-  },
-  "devDependencies": {
-    "@types/node": "^22.10.5"
-  }
-}
+{
+  "name": "lupine.web",
+  "version": "1.1.5",
+  "license": "MIT",
+  "author": "uuware.com",
+  "homepage": "https://github.com/uuware/lupine.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uuware/lupine.js.git",
+    "directory": "packages/lupine.web"
+  },
+  "description": "lupine.web is a extremely fast, small size and lightweight frontend framework, using React TSX syntax.",
+  "main": "src/index.ts",
+  "source": "src/index.ts",
+  "types": "src/index.ts",
+  "engines": {
+    "node": ">= 20"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "browser": "./src/index.ts",
+      "umd": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    },
+    "./jsx-runtime": {
+      "types": "./jsx-runtime/src/index.d.ts",
+      "browser": "./jsx-runtime/index.js",
+      "umd": "./jsx-runtime/index.js",
+      "import": "./jsx-runtime/index.js",
+      "require": "./jsx-runtime/index.js"
+    }
+  },
+  "keywords": [
+    "frontend",
+    "responsive",
+    "lightweight",
+    "grid"
+  ],
+  "scripts": {
+    "note": "echo 'build is not needed as the typescript code is supposed to be referred directly from other projects'",
+    "npm-publish": "npm publish --access public",
+    "build-min": "tsc && npx esbuild ./dist/build.js --minify --outfile=./dist/build.min.js",
+    "build": "tsc"
+  },
+  "peerDependencies": {
+    "jsx-runtime": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.5"
+  }
+}

package/src/core/bind-attributes.ts

@@ -1,61 +1,61 @@
-import { bindRef } from './bind-ref';
-
-export const bindAttributesChildren = (topEl: Element, children: any) => {
-  for (let i = 0; i < children.length; i++) {
-    const item = children[i];
-    if (item && item.type && item.props) {
-      bindAttributes(topEl, item.type, item.props);
-    } else if (item && Array.isArray(item)) {
-      bindAttributesChildren(topEl, item);
-    } else if (
-      typeof item !== 'undefined' &&
-      item !== null &&
-      typeof item !== 'string' &&
-      typeof item !== 'number' &&
-      typeof item !== 'boolean'
-    ) {
-      console.warn(`Unexpected children:`, item);
-    }
-  }
-};
-
-export const bindAttributes = (topEl: Element, type: any, props: any) => {
-  const newProps = (props._result && props._result.props) || props;
-  if (newProps._id) {
-    let el = topEl.querySelector(`[${newProps._id}]`);
-    if (!el && topEl.getAttribute(newProps._id) === '') {
-      el = topEl;
-    }
-    if (el) {
-      for (let i in newProps) {
-        if (i === 'ref') {
-          bindRef(type, newProps, el);
-          // } else if (i === "css") {
-          //     mountStyles(`[${newProps._id}]`, `[${newProps._id}]`, newProps[i]);
-        } else if (i[0] === 'o' && i[1] === 'n') {
-          let name = i;
-          if (name.toLowerCase() in el) name = name.toLowerCase().slice(2);
-          else name = name.slice(2);
-          // console.log('===bind event', name, el);
-          el.addEventListener(name, newProps[i]);
-        }
-      }
-    }
-  }
-
-  if (newProps.children && Array.isArray(newProps.children)) {
-    bindAttributesChildren(topEl, newProps.children);
-  } else if (newProps._result && newProps._result.type !== 'Fragment' && newProps._result.props) {
-    bindAttributes(topEl, newProps._result.type, newProps._result.props);
-  } else if (newProps.children && newProps.children.type && newProps.children.props) {
-    bindAttributes(topEl, newProps.children.type, newProps.children.props);
-  } else if (
-    !newProps.children ||
-    typeof newProps.children === 'string' ||
-    typeof newProps.children === 'number' ||
-    typeof newProps.children === 'boolean'
-  ) {
-  } else {
-    console.warn(`Unexpected children:`, newProps.children, type, props);
-  }
-};
+import { bindRef } from './bind-ref';
+
+export const bindAttributesChildren = (topEl: Element, children: any) => {
+  for (let i = 0; i < children.length; i++) {
+    const item = children[i];
+    if (item && item.type && item.props) {
+      bindAttributes(topEl, item.type, item.props);
+    } else if (item && Array.isArray(item)) {
+      bindAttributesChildren(topEl, item);
+    } else if (
+      typeof item !== 'undefined' &&
+      item !== null &&
+      typeof item !== 'string' &&
+      typeof item !== 'number' &&
+      typeof item !== 'boolean'
+    ) {
+      console.warn(`Unexpected children:`, item);
+    }
+  }
+};
+
+export const bindAttributes = (topEl: Element, type: any, props: any) => {
+  const newProps = (props._result && props._result.props) || props;
+  if (newProps._id) {
+    let el = topEl.querySelector(`[${newProps._id}]`);
+    if (!el && topEl.getAttribute(newProps._id) === '') {
+      el = topEl;
+    }
+    if (el) {
+      for (let i in newProps) {
+        if (i === 'ref') {
+          bindRef(type, newProps, el);
+          // } else if (i === "css") {
+          //     mountStyles(`[${newProps._id}]`, `[${newProps._id}]`, newProps[i]);
+        } else if (i[0] === 'o' && i[1] === 'n') {
+          let name = i;
+          if (name.toLowerCase() in el) name = name.toLowerCase().slice(2);
+          else name = name.slice(2);
+          // console.log('===bind event', name, el);
+          el.addEventListener(name, newProps[i]);
+        }
+      }
+    }
+  }
+
+  if (newProps.children && Array.isArray(newProps.children)) {
+    bindAttributesChildren(topEl, newProps.children);
+  } else if (newProps._result && newProps._result.type !== 'Fragment' && newProps._result.props) {
+    bindAttributes(topEl, newProps._result.type, newProps._result.props);
+  } else if (newProps.children && newProps.children.type && newProps.children.props) {
+    bindAttributes(topEl, newProps.children.type, newProps.children.props);
+  } else if (
+    !newProps.children ||
+    typeof newProps.children === 'string' ||
+    typeof newProps.children === 'number' ||
+    typeof newProps.children === 'boolean'
+  ) {
+  } else {
+    console.warn(`Unexpected children:`, newProps.children, type, props);
+  }
+};

package/src/core/bind-lang.ts

@@ -1,52 +1,52 @@
-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
-
-export const defaultLangName = 'en';
-export const langCookieName = 'lang';
-export const updateLangEventName = 'updateLang';
-const _langCfg: any = { defaultLang: defaultLangName, langs: {} };
-export type OneLangProps = { [key: string]: string };
-export const bindLang = (defaultLang: string, langs: OneLangProps) => {
-  _langCfg.defaultLang = defaultLang;
-  _langCfg.langs = langs;
-
-  // set to cookie
-  getCurrentLang();
-};
-
-export const getCurrentLang = () => {
-  let langName = getEitherCookie(langCookieName) as string;
-  if (!langName || !_langCfg.langs[langName]) {
-    langName = _langCfg.defaultLang;
-    if (isFrontEnd()) {
-      setCookie(langCookieName, _langCfg.defaultLang);
-    }
-  }
-  return { langName, langs: _langCfg.langs };
-};
-
-// the FE needs to reload the page when the language is changed
-export const updateLang = (langName: string) => {
-  // Lang is only updated in Browser
-  _langCfg.defaultLang = langName;
-  if (!isFrontEnd()) {
-    return;
-  }
-
-  setCookie(langCookieName, langName);
-  // document.documentElement.setAttribute(langAttributeName, langName);
-
-  // // update lang for all iframe
-  // 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(langAttributeName, langName);
-  //   }
-  // }
-
-  const event = new CustomEvent(updateLangEventName, { detail: langName });
-  window.dispatchEvent(event);
-};
+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
+
+export const defaultLangName = 'en';
+export const langCookieName = 'lang';
+export const updateLangEventName = 'updateLang';
+const _langCfg: any = { defaultLang: defaultLangName, langs: {} };
+export type OneLangProps = { [key: string]: string };
+export const bindLang = (defaultLang: string, langs: OneLangProps) => {
+  _langCfg.defaultLang = defaultLang;
+  _langCfg.langs = langs;
+
+  // set to cookie
+  getCurrentLang();
+};
+
+export const getCurrentLang = () => {
+  let langName = getEitherCookie(langCookieName) as string;
+  if (!langName || !_langCfg.langs[langName]) {
+    langName = _langCfg.defaultLang;
+    if (isFrontEnd()) {
+      setCookie(langCookieName, _langCfg.defaultLang);
+    }
+  }
+  return { langName, langs: _langCfg.langs };
+};
+
+// the FE needs to reload the page when the language is changed
+export const updateLang = (langName: string) => {
+  // Lang is only updated in Browser
+  _langCfg.defaultLang = langName;
+  if (!isFrontEnd()) {
+    return;
+  }
+
+  setCookie(langCookieName, langName);
+  // document.documentElement.setAttribute(langAttributeName, langName);
+
+  // // update lang for all iframe
+  // 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(langAttributeName, langName);
+  //   }
+  // }
+
+  const event = new CustomEvent(updateLangEventName, { detail: langName });
+  window.dispatchEvent(event);
+};

package/src/core/bind-links.ts

@@ -1,16 +1,26 @@
-import { _lupineJs } from './export-lupine';
-
-export function bindLinks(el: Element | Document) {
-  const links = el.getElementsByTagName('a');
-  for (var i = 0, l = links.length; i < l; i++) {
-    let href = new URL(links[i].href, document.baseURI).href;
-    if (links[i].target !== '_blank' && href.startsWith(document.location.origin)) {
-      href = href.substring(document.location.origin.length);
-      // console.log(`====${href}, javascript:init('${document.links[i].href}')`);
-      links[i].onclick = () => {
-        _lupineJs.initializePage(href);
-        return false;
-      };
-    }
-  }
-}
+import { _lupineJs } from './export-lupine';
+
+export function bindLinks(el: Element | Document) {
+  const links = el.getElementsByTagName('a');
+  for (var i = 0, l = links.length; i < l; i++) {
+    let originalHref = links[i].getAttribute('href');
+    if (!originalHref || originalHref.startsWith('javascript:')) continue;
+    if (originalHref.startsWith('#')) {
+      links[i].onclick = () => {
+        const id = decodeURIComponent(originalHref!.substring(1));
+        document.getElementById(id)?.scrollIntoView(true);
+        return false;
+      };
+      continue;
+    }
+    let href = new URL(links[i].href, document.baseURI).href;
+    if (links[i].target !== '_blank' && href.startsWith(document.location.origin)) {
+      href = href.substring(document.location.origin.length);
+      // console.log(`====${href}, javascript:init('${document.links[i].href}')`);
+      links[i].onclick = () => {
+        _lupineJs.initializePage(href);
+        return false;
+      };
+    }
+  }
+}

package/src/core/bind-meta.tsx

@@ -1,52 +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;
-};
+// 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;
+};