lupine.web 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.web",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/core/bind-styles.ts

@@ -1,3 +1,4 @@
+import { uniqueIdGenerator } from 'lupine.components';
 import { CssProps } from '../jsx';
 import { getCurrentTheme, themeCookieName } from './bind-theme';
 import { camelToHyphens } from './camel-to-hyphens';
@@ -163,16 +164,31 @@ For example, it can be like this for all elements:
 
 For themes like [data-theme="dark" i], the topUniqueClassName should be empty
 */
+export const globalStyleUniqueId = uniqueIdGenerator('g'); // g means global style
+const _globalStyleIds = new Map<CssProps, string>();
+export const getGlobalStylesId = (style: CssProps): string => {
+  if (!_globalStyleIds.has(style)) {
+    const id = globalStyleUniqueId();
+    _globalStyleIds.set(style, id);
+  }
+  return _globalStyleIds.get(style)!;
+};
+
 const _globalStyle = new Map();
-export const bindGlobalStyles = (topUniqueClassName: string, style: CssProps, forceUpdate = false, isTheme = false) => {
+export const bindGlobalStyle = (
+  topUniqueClassName: string,
+  style: CssProps,
+  forceUpdate = false,
+  noTopClassName = false
+) => {
   if (typeof document !== 'undefined') {
     let cssDom = document.getElementById(`sty-${topUniqueClassName}`);
     if (forceUpdate || !cssDom) {
-      updateCssDom(topUniqueClassName, processStyle(isTheme ? '' : topUniqueClassName, style).join(''), cssDom);
+      updateCssDom(topUniqueClassName, processStyle(noTopClassName ? '' : topUniqueClassName, style).join(''), cssDom);
     }
   } else if (!_globalStyle.has(topUniqueClassName) || forceUpdate) {
     // don't overwrite it to have the same behavior as in the Browser
-    _globalStyle.set(topUniqueClassName, { topUniqueClassName, style });
+    _globalStyle.set(topUniqueClassName, { topUniqueClassName, noTopClassName, style });
   }
 };
 
@@ -213,8 +229,8 @@ export const generateAllGlobalStyles = () => {
 
   result.push(`<style id="sty-${themeCookieName}">${generateThemeStyles()}</style>`);
 
-  for (let [uniqueStyleId, { topUniqueClassName, style }] of _globalStyle) {
-    const cssText = processStyle(topUniqueClassName, style).join('');
+  for (let [uniqueStyleId, { topUniqueClassName, noTopClassName, style }] of _globalStyle) {
+    const cssText = processStyle(noTopClassName ? '' : topUniqueClassName, style).join('');
     result.push(`<style id="sty-${uniqueStyleId}">${cssText}</style>`);
   }
 

package/src/core/index.ts

@@ -10,6 +10,7 @@ export * from './camel-to-hyphens';
 export * from './mount-component';
 export * from './page-loaded-events';
 export * from './page-router';
+export * from './render-component';
 export * from './replace-innerhtml';
 export * from './server-cookie';
 

package/src/core/render-component.ts

@@ -11,7 +11,7 @@ export const domUniqueId = uniqueIdGenerator('l'); // l means label
 //   domUniqueId(true);
 // });
 
-function renderChildren(html: string[], children: any, uniqueClassName?: string) {
+function renderChildren(html: string[], children: any, uniqueClassName?: string, globalCssId?: string) {
   if (typeof children === 'string') {
     html.push(children);
   } else if (children === false || children === null || typeof children === 'undefined') {
@@ -22,10 +22,10 @@ function renderChildren(html: string[], children: any, uniqueClassName?: string)
   } else if (Array.isArray(children)) {
     for (let i = 0; i < children.length; i++) {
       const item = children[i];
-      renderChildren(html, item, uniqueClassName);
+      renderChildren(html, item, uniqueClassName, globalCssId);
     }
   } else if (children.type && children.props) {
-    renderComponent(children.type, children.props, uniqueClassName);
+    renderComponent(children.type, children.props, uniqueClassName, globalCssId);
     html.push(...children.props._html);
     children.props._html.length = 0;
   } else {
@@ -57,7 +57,7 @@ const genUniqueId = (props: any) => {
   return props._id;
 };
 // data-refid will be assigned with a ref.id
-function renderAttribute(type: any, props: any, jsxNodes: any, uniqueClassName?: string) {
+function renderAttribute(type: any, props: any, jsxNodes: any, uniqueClassName?: string, globalCssId?: string) {
   const html = [];
   // data-refid is used for nested components like this:
   //    <div class='class-name' ref={ref} ...>...
@@ -108,7 +108,21 @@ function renderAttribute(type: any, props: any, jsxNodes: any, uniqueClassName?:
           // add as the first
           classNameList.unshift(props._id);
         }
-        if (uniqueClassName) {
+        if (props['ref'] && props['ref'].globalCssId && !classNameList.includes(props['ref'].globalCssId)) {
+          // add as the first
+          classNameList.unshift(props['ref'].globalCssId);
+        }
+        if (globalCssId && uniqueClassName) {
+          // &xx -> globalCssId + xx and uniqueClassName+xx
+          classNameList = classNameList.flatMap((item: string) => {
+            if (item.includes('&')) {
+              return [item.replace(/&/g, globalCssId), item.replace(/&/g, uniqueClassName)];
+            }
+            return [item];
+          });
+        } else if (globalCssId) {
+          classNameList = classNameList.map((item: string) => item.replace(/&/g, globalCssId));
+        } else if (uniqueClassName) {
           classNameList = classNameList.map((item: string) => item.replace(/&/g, uniqueClassName));
         }
         html.push(`class="${classNameList.join(' ')}"`);
@@ -125,11 +139,11 @@ function renderAttribute(type: any, props: any, jsxNodes: any, uniqueClassName?:
 }
 
 // The result has only one element
-export const renderComponent = (type: any, props: any, uniqueClassName?: string) => {
+export const renderComponent = (type: any, props: any, uniqueClassName?: string, globalCssId?: string) => {
   //   logger.log("==================renderComponent", type);
   if (Array.isArray(props)) {
     const jsxNodes = { type: 'Fragment', props: { children: props } } as any;
-    renderComponent(jsxNodes.type, jsxNodes.props, uniqueClassName);
+    renderComponent(jsxNodes.type, jsxNodes.props, uniqueClassName, globalCssId);
     return;
   }
 
@@ -147,7 +161,7 @@ export const renderComponent = (type: any, props: any, uniqueClassName?: string)
     // }
     // logger.log('==========props._result', props._result);
     if (typeof props._result.type === 'function') {
-      renderComponent(props._result.type, props._result.props, uniqueClassName);
+      renderComponent(props._result.type, props._result.props, uniqueClassName, globalCssId);
       if (props._result.props._html) {
         props._html.push(...props._result.props._html);
         props._result.props._html.length = 0;
@@ -172,7 +186,11 @@ export const renderComponent = (type: any, props: any, uniqueClassName?: string)
         newProps['class'] = newUniqueClassName;
       }
     }
-    const attrs = renderAttribute(newType, newProps, { type, props }, newUniqueClassName);
+    let newGlobalCssId = globalCssId;
+    if (newProps['ref'] && newProps['ref'].globalCssId) {
+      newGlobalCssId = newProps['ref'].globalCssId;
+    }
+    const attrs = renderAttribute(newType, newProps, { type, props }, newUniqueClassName, newGlobalCssId);
     if (selfClosingTags.includes(newType.toLowerCase())) {
       // for Fragment, only needs this tag when Ref is assigned
       if (newType !== 'Fragment' || newProps.ref) {
@@ -196,7 +214,7 @@ export const renderComponent = (type: any, props: any, uniqueClassName?: string)
         //     assignLabels(newProps._lb, newProps.children);
         // }
 
-        renderChildren(props._html, newProps.children, newUniqueClassName);
+        renderChildren(props._html, newProps.children, newUniqueClassName, newGlobalCssId);
       } else if (newProps['dangerouslySetInnerHTML']) {
         props._html.push(newProps['dangerouslySetInnerHTML']);
       } else {
@@ -208,7 +226,7 @@ export const renderComponent = (type: any, props: any, uniqueClassName?: string)
       }
     }
   } else if (newType.name === 'Fragment') {
-    renderChildren(props._html, newProps.children, uniqueClassName);
+    renderChildren(props._html, newProps.children, uniqueClassName, globalCssId);
   } else {
     logger.warn('Unknown type: ', type, props, newType, newProps);
   }

package/src/jsx.ts

@@ -20,6 +20,8 @@ export type Ref<T> = RefObject<T> | RefCallback<T>;
 // Ref can only apply to a DOM element (not a function component)
 export type RefProps = {
   id?: string;
+  // if a component has global styles, and also has "&" classNames, then globalCssId is needed to replace "&"
+  globalCssId?: string;
   current?: any; // Element | null,
   onLoad?: (el: Element) => Promise<void>;
   onUnload?: (el: Element) => Promise<void>;