lupine.web 1.0.31 → 1.1.0

package/package.json

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

package/src/core/bind-ref.ts

@@ -1,8 +1,5 @@
 import { VNode } from '../jsx';
-import { bindAttributes } from './bind-attributes';
-import { bindLinks } from './bind-links';
 import { mountInnerComponent, mountOuterComponent } from './mount-component';
-import { renderComponent } from './render-component';
 import { replaceInnerhtml } from './replace-innerhtml';
 
 export const bindRef = (type: any, newProps: any, el: Element) => {
@@ -29,10 +26,16 @@ export const bindRef = (type: any, newProps: any, el: Element) => {
    * @returns Element
    */
   newProps['ref'].$ = (selector: string) => {
-    return el.querySelector(`[${id}] ` + selector);
+    if (selector.startsWith('&')) {
+      return el.querySelector(`.${id}${selector.substring(1).replace(/&/g, id)}`);
+    }
+    return el.querySelector(`.${id} ${selector.replace(/&/g, id)}`);
   };
   newProps['ref'].$all = (selector: string) => {
-    return el.querySelectorAll(`[${id}] ` + selector);
+    if (selector.startsWith('&')) {
+      return el.querySelectorAll(`.${id}${selector.substring(1).replace(/&/g, id)}`);
+    }
+    return el.querySelectorAll(`.${id} ${selector.replace(/&/g, id)}`);
   };
 
   newProps['ref'].mountInnerComponent = async (content: string | VNode<any>) => {

package/src/core/bind-styles.ts

@@ -36,20 +36,32 @@ const updateOneBlock = (css: string[], cssTemp: string[], className: string, med
   }
 };
 
-export const processStyle = (className: string, style: CssProps, mediaQuery?: string): string[] => {
+const processStyleSub = (
+  topUniqueClassName: string,
+  classSelector: string,
+  style: CssProps,
+  mediaQuery?: string
+): string[] => {
+  const outClassName = classSelector
+    .split(',')
+    .map((key0) => key0.trim())
+    .map((key0) => {
+      return (key0.startsWith('&') ? `${classSelector}${key0.substring(1)}` : key0).replace(/&/g, topUniqueClassName);
+    })
+    .join(',');
   const css: string[] = [];
   const cssTemp: string[] = [];
   for (let i in style) {
     const value = style[i];
     if (value === null || typeof value !== 'object') {
       if (value !== '' && typeof value !== 'undefined') {
-        if (!className) {
+        if (!classSelector) {
           console.warn(`No className is defined for: ${camelToHyphens(i)}:${value};`);
         }
         cssTemp.push(`${camelToHyphens(i)}:${value};`);
       }
     } else {
-      updateOneBlock(css, cssTemp, className, mediaQuery);
+      updateOneBlock(css, cssTemp, outClassName, mediaQuery);
 
       if (i.startsWith('@keyframes')) {
         const cssText = Object.keys(value)
@@ -57,17 +69,22 @@ export const processStyle = (className: string, style: CssProps, mediaQuery?: st
           .join('');
         css.push(`${i}{${cssText}}`);
       } else if (i.startsWith('@media')) {
-        const ret = processStyle(className, value, i);
+        const ret = processStyleSub(topUniqueClassName, classSelector, value, i);
         css.push(...ret);
       } else {
         // '&:hover, &.open': {
-        //     '>.d1, .d2': {
-        //     },
+        //     '>.d1, .d2': {...},
         // }, ==>
         // &:hover >.d1, &:hover >.d2, &.open >.d1, &.open .d2
-        const newClassName = !className
+
+        // '.aa': {
+        //     '&:hover': {...},
+        //     '.bb': {...},
+        // }, ==>
+        // .aa:hover, .aa .bb
+        const newClassSelector = !classSelector
           ? i
-          : className
+          : classSelector
               .split(',')
               .map((key0) => key0.trim())
               .map((key0) => {
@@ -77,25 +94,31 @@ export const processStyle = (className: string, style: CssProps, mediaQuery?: st
                   .map((key) => {
                     // not needed to "+" as them share same parents?
                     // return key.split('+').map(key2 => key2.startsWith('&') ? key0 + key2.substring(1) : key0 + ' ' + key2).join('+');
-                    return key.startsWith('&') ? key0 + key.substring(1) : key0 + ' ' + key;
+                    // return key.startsWith('&') ? key0 + key.substring(1) : key0 + ' ' + key;
+                    const newKey = key.startsWith('&') ? key0 + key.substring(1) : key0 + ' ' + key;
+                    return newKey.replace(/&/g, topUniqueClassName);
                   })
                   .join(',');
               })
               .join(',');
-        const ret = processStyle(newClassName, value, mediaQuery);
+        const ret = processStyleSub(topUniqueClassName, newClassSelector, value, mediaQuery);
         css.push(...ret);
       }
     }
   }
-  updateOneBlock(css, cssTemp, className, mediaQuery);
+  updateOneBlock(css, cssTemp, outClassName, mediaQuery);
   return css;
 };
+// topUniqueClassName is used to replace '&' in className, and '.' + topUniqueClassName is used as selector in styles ".xxx {}"
+export const processStyle = (topUniqueClassName: string, style: CssProps): string[] => {
+  return processStyleSub(topUniqueClassName, topUniqueClassName ? `.${topUniqueClassName}` : '', style);
+};
 
 // mount-components has the same name `sty-`
-export const updateStyles = (selector: string, style: CssProps) => {
-  const el = selector && document.querySelector(selector);
+export const updateStyles = (topUniqueClassName: string, style: CssProps) => {
+  const el = topUniqueClassName && document.querySelector(`.${topUniqueClassName}`);
   if (el) {
-    const cssText = processStyle(selector, style).join('');
+    const cssText = processStyle(topUniqueClassName, style).join('');
     // if the first child is style, then update it
     if (el.firstChild && el.firstChild.nodeName === 'STYLE') {
       (el.firstChild as any).innerHTML = cssText;
@@ -106,7 +129,7 @@ export const updateStyles = (selector: string, style: CssProps) => {
       el.prepend(style);
     }
   } else {
-    console.warn(`Can't find "${selector}" to update styles.`);
+    console.warn(`Can't find "${topUniqueClassName}" to update styles.`);
   }
 };
 
@@ -120,21 +143,36 @@ const updateCssDom = (uniqueStyleId: string, cssText: string, cssDom: HTMLElemen
 };
 
 /*
+If selectors in GlobalStyles have '&' at top level, then classSelector is needed, otherwise classSelector can be ''
+This is ok:
+{
+  '.aa':{
+    '&:hover': {...}
+  }
+}
+This needs classSelector:
+{
+  'color': 'red', // will need and be put under .topUniqueClassName
+  '&:hover': {...} // & will be replaced by .topUniqueClassName
+}
 Global styles including theme will not be updated once it's created.
-topClassName is a className or a tag name.
+topUniqueClassName is a className or a tag name.
+classSelector is a selector used in styles ".xxx {}"
 For example, it can be like this for all elements:
   html { ... } or :root { ... }
+
+For themes like [data-theme="dark" i], the topUniqueClassName should be empty
 */
 const _globalStyle = new Map();
-export const bindGlobalStyles = (uniqueStyleId: string, topClassName: string, style: CssProps, forceUpdate = false) => {
+export const bindGlobalStyles = (topUniqueClassName: string, style: CssProps, forceUpdate = false, isTheme = false) => {
   if (typeof document !== 'undefined') {
-    let cssDom = document.getElementById(`sty-${uniqueStyleId}`);
+    let cssDom = document.getElementById(`sty-${topUniqueClassName}`);
     if (forceUpdate || !cssDom) {
-      updateCssDom(uniqueStyleId, processStyle(topClassName, style).join(''), cssDom);
+      updateCssDom(topUniqueClassName, processStyle(isTheme ? '' : topUniqueClassName, style).join(''), cssDom);
     }
-  } else if (!_globalStyle.has(uniqueStyleId) || forceUpdate) {
+  } else if (!_globalStyle.has(topUniqueClassName) || forceUpdate) {
     // don't overwrite it to have the same behavior as in the Browser
-    _globalStyle.set(uniqueStyleId, { topClassName, style });
+    _globalStyle.set(topUniqueClassName, { topUniqueClassName, style });
   }
 };
 
@@ -143,7 +181,11 @@ const generateThemeStyles = () => {
   const themeCss = [];
   for (let themeName in currentTheme.themes) {
     // i is for case-insensitive
-    themeCss.push(...processStyle(`[data-theme="${themeName}" i]`, currentTheme.themes[themeName]));
+    themeCss.push(
+      ...processStyle('', {
+        [`[data-theme="${themeName}" i]`]: currentTheme.themes[themeName],
+      })
+    );
   }
   return themeCss.join('\n');
 };
@@ -159,7 +201,7 @@ if (typeof document !== 'undefined') {
   });
 }
 
-// 不能清空，在index.tsx中加载的只会被加载一次，清空了就没有了
+// can't clear global styles，because in index.tsx it is only loaded once, clear it it will be gone
 // const clearGlobalStyles = () => {
 //   // reset unique id
 //   _globalStyle.clear();
@@ -169,10 +211,10 @@ if (typeof document !== 'undefined') {
 export const generateAllGlobalStyles = () => {
   const result = [];
 
-  result.push(`<style id="sty-theme">${generateThemeStyles()}</style>`);
+  result.push(`<style id="sty-${themeCookieName}">${generateThemeStyles()}</style>`);
 
-  for (let [uniqueStyleId, { topClassName, style }] of _globalStyle) {
-    const cssText = processStyle(topClassName, style).join('');
+  for (let [uniqueStyleId, { topUniqueClassName, style }] of _globalStyle) {
+    const cssText = processStyle(topUniqueClassName, style).join('');
     result.push(`<style id="sty-${uniqueStyleId}">${cssText}</style>`);
   }
 

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) {
+function renderChildren(html: string[], children: any, uniqueClassName?: 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) {
   } else if (Array.isArray(children)) {
     for (let i = 0; i < children.length; i++) {
       const item = children[i];
-      renderChildren(html, item);
+      renderChildren(html, item, uniqueClassName);
     }
   } else if (children.type && children.props) {
-    renderComponent(children.type, children.props);
+    renderComponent(children.type, children.props, uniqueClassName);
     html.push(...children.props._html);
     children.props._html.length = 0;
   } else {
@@ -57,16 +57,16 @@ const genUniqueId = (props: any) => {
   return props._id;
 };
 // data-refid will be assigned with a ref.id
-function renderAttribute(type: any, props: any, jsxNodes: any) {
+function renderAttribute(type: any, props: any, jsxNodes: any, uniqueClassName?: string) {
   const html = [];
   // data-refid is used for nested components like this:
   //    <div class='class-name' ref={ref} ...>...
   //      <div data-refid={ref}>
   // then data-refid can be located:
   //   ref.$(`.class-name[data-refid=${ref.id}]`)
-  if (props['data-refid'] && props['data-refid'].id) {
-    props['data-refid'] = props['data-refid'].id;
-  }
+  // if (props['data-refid'] && props['data-refid'].id) {
+  //   props['data-refid'] = props['data-refid'].id;
+  // }
   for (let i in props) {
     if (i === 'ref') {
       if (props[i]) {
@@ -103,11 +103,15 @@ function renderAttribute(type: any, props: any, jsxNodes: any) {
           html.push(`${i}="${props[i]}"`);
         }
       } else if (i === 'class' || i === 'className') {
-        const className = props[i]
-          .split(' ')
-          .filter((item: string) => item && item !== '')
-          .join(' ');
-        html.push(`class="${className}"`);
+        let classNameList = props[i].split(' ').filter((item: string) => item && item !== '');
+        if ((props['css'] || props['ref']) && !classNameList.includes(props._id)) {
+          // add as the first
+          classNameList.unshift(props._id);
+        }
+        if (uniqueClassName) {
+          classNameList = classNameList.map((item: string) => item.replace(/&/g, uniqueClassName));
+        }
+        html.push(`class="${classNameList.join(' ')}"`);
       } else if (i !== 'dangerouslySetInnerHTML') {
         html.push(`${i}="${props[i]}"`);
       }
@@ -120,28 +124,12 @@ function renderAttribute(type: any, props: any, jsxNodes: any) {
   return html.join(' ');
 }
 
-// assign the same label to all children
-// function assignLabels(label: string, children: any) {
-//     if (Array.isArray(children)) {
-//         for (let i = 0; i < children.length; i++) {
-//             const item = children[i];
-//             if (Array.isArray(item) || (item && item.type && item.props)) {
-//                 assignLabels(label, item);
-//             }
-//         }
-//     } else if (children.type && children.props) {
-//         if (typeof children.type === 'string') {
-//             children.props._lb = label;
-//         }
-//     }
-// }
-
 // The result has only one element
-export const renderComponent = (type: any, props: any) => {
+export const renderComponent = (type: any, props: any, uniqueClassName?: string) => {
   //   logger.log("==================renderComponent", type);
   if (Array.isArray(props)) {
     const jsxNodes = { type: 'Fragment', props: { children: props } } as any;
-    renderComponent(jsxNodes.type, jsxNodes.props);
+    renderComponent(jsxNodes.type, jsxNodes.props, uniqueClassName);
     return;
   }
 
@@ -159,7 +147,7 @@ export const renderComponent = (type: any, props: any) => {
     // }
     // logger.log('==========props._result', props._result);
     if (typeof props._result.type === 'function') {
-      renderComponent(props._result.type, props._result.props);
+      renderComponent(props._result.type, props._result.props, uniqueClassName);
       if (props._result.props._html) {
         props._html.push(...props._result.props._html);
         props._result.props._html.length = 0;
@@ -174,7 +162,17 @@ export const renderComponent = (type: any, props: any) => {
     console.log('renderComponent', newType, newProps);
   }
   if (typeof newType === 'string') {
-    const attrs = renderAttribute(newType, newProps, { type, props });
+    if (newProps._id) {
+      console.warn('This component reference is used more than once and will have binding issues: ', newProps);
+    }
+    let newUniqueClassName = uniqueClassName;
+    if (newProps['css'] || newProps['ref']) {
+      newUniqueClassName = genUniqueId(newProps);
+      if (!newProps['class'] && !newProps['className']) {
+        newProps['class'] = newUniqueClassName;
+      }
+    }
+    const attrs = renderAttribute(newType, newProps, { type, props }, newUniqueClassName);
     if (selfClosingTags.includes(newType.toLowerCase())) {
       // for Fragment, only needs this tag when Ref is assigned
       if (newType !== 'Fragment' || newProps.ref) {
@@ -189,8 +187,8 @@ export const renderComponent = (type: any, props: any) => {
       }
 
       if (newProps['css']) {
-        const cssText = processStyle(`[${newProps._id}]`, newProps['css']).join('');
-        props._html.push(`<style id="sty-${newProps._id}">${cssText}</style>`); // sty means style, and updateStyles has the same name
+        const cssText = processStyle(newUniqueClassName!, newProps['css']).join('');
+        props._html.push(`<style id="sty-${newUniqueClassName}">${cssText}</style>`); // sty means style, and updateStyles has the same name
       }
 
       if (newProps.children) {
@@ -198,7 +196,7 @@ export const renderComponent = (type: any, props: any) => {
         //     assignLabels(newProps._lb, newProps.children);
         // }
 
-        renderChildren(props._html, newProps.children);
+        renderChildren(props._html, newProps.children, newUniqueClassName);
       } else if (newProps['dangerouslySetInnerHTML']) {
         props._html.push(newProps['dangerouslySetInnerHTML']);
       } else {
@@ -210,7 +208,7 @@ export const renderComponent = (type: any, props: any) => {
       }
     }
   } else if (newType.name === 'Fragment') {
-    renderChildren(props._html, newProps.children);
+    renderChildren(props._html, newProps.children, uniqueClassName);
   } else {
     logger.warn('Unknown type: ', type, props, newType, newProps);
   }

package/src/lib/unique-id.ts

@@ -25,9 +25,10 @@
 
 export function uniqueIdGenerator(preKey: string) {
   let count = 0;
-  let lastKey = Math.round(new Date().getTime() / 1000).toString(36);
+  const baseTime = Math.round(Date.now() / 1000);
+  let lastKey = '';
   return function (): string {
-    const key = Math.round(new Date().getTime() / 1000).toString(36);
+    const key = Math.round(Date.now() / 1000 - baseTime).toString(36);
     if (key !== lastKey) {
       count = 0;
       lastKey = key;