lupine.web 1.1.3 → 1.1.5

package/src/core/bind-ref.ts

@@ -1,51 +1,51 @@
-import { VNode } from '../jsx';
-import { mountInnerComponent, mountOuterComponent } from './mount-component';
-import { replaceInnerhtml } from './replace-innerhtml';
-
-export const bindRef = (type: any, newProps: any, el: Element) => {
-  // console.log('========', newProps, el);
-  const id = newProps._id;
-  // newProps["ref"].id = id; // this is set at bindAttributes
-  newProps['ref'].current = el;
-  if (newProps['ref'].onLoad) {
-    // setTimeout(() => newProps['ref'].onLoad(el), 0);
-    // Promise.resolve().then(fn) will be called in the end of current event loop (quicker than setTimeout)
-    const defer = Promise.prototype.then.bind(Promise.resolve());
-    defer(() => newProps['ref'].onLoad(el));
-  }
-  if (newProps['ref'].onUnload) {
-    (el as any)._lj = (el as any)._lj || {};
-    (el as any)._lj.onUnload = async () => {
-      await newProps['ref'].onUnload(el);
-    };
-  }
-
-  /**
-   * ref.$('selector')
-   * @param selector
-   * @returns Element
-   */
-  newProps['ref'].$ = (selector: string) => {
-    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) => {
-    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>) => {
-    if (typeof content === 'object' && content.type && content.props) {
-      await mountInnerComponent(el, content);
-    } else {
-      await replaceInnerhtml(el, content as string);
-    }
-  };
-  newProps['ref'].mountOuterComponent = async (content: VNode<any>) => {
-    await mountOuterComponent(el, content);
-  };
-};
+import { VNode } from '../jsx';
+import { mountInnerComponent, mountOuterComponent } from './mount-component';
+import { replaceInnerhtml } from './replace-innerhtml';
+
+export const bindRef = (type: any, newProps: any, el: Element) => {
+  // console.log('========', newProps, el);
+  const id = newProps._id;
+  // newProps["ref"].id = id; // this is set at bindAttributes
+  newProps['ref'].current = el;
+  if (newProps['ref'].onLoad) {
+    // setTimeout(() => newProps['ref'].onLoad(el), 0);
+    // Promise.resolve().then(fn) will be called in the end of current event loop (quicker than setTimeout)
+    const defer = Promise.prototype.then.bind(Promise.resolve());
+    defer(() => newProps['ref'].onLoad(el));
+  }
+  if (newProps['ref'].onUnload) {
+    (el as any)._lj = (el as any)._lj || {};
+    (el as any)._lj.onUnload = async () => {
+      await newProps['ref'].onUnload(el);
+    };
+  }
+
+  /**
+   * ref.$('selector')
+   * @param selector
+   * @returns Element
+   */
+  newProps['ref'].$ = (selector: string) => {
+    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) => {
+    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>) => {
+    if (typeof content === 'object' && content.type && content.props) {
+      await mountInnerComponent(el, content);
+    } else {
+      await replaceInnerhtml(el, content as string);
+    }
+  };
+  newProps['ref'].mountOuterComponent = async (content: VNode<any>) => {
+    await mountOuterComponent(el, content);
+  };
+};

package/src/core/bind-styles.ts

@@ -1,239 +1,239 @@
-import { uniqueIdGenerator } from 'lupine.components';
-import { CssProps } from '../jsx';
-import { getCurrentTheme, themeCookieName } from './bind-theme';
-import { camelToHyphens } from './camel-to-hyphens';
-// import { bindPageResetEvent } from './page-reset-events';
-import { bindPageLoadedEvent } from './page-loaded-events';
-
-const wrapCss = (className: string, cssText: string, mediaQuery?: string) => {
-  // if (!className) {
-  //   console.warn(`No class name is provided for ${cssText}`);
-  // }
-  let cssTextWrap = className ? `${className}{${cssText}}` : cssText;
-  if (mediaQuery) {
-    cssTextWrap = `${mediaQuery}{${cssTextWrap}}`;
-  }
-  return cssTextWrap;
-};
-
-const processStyleValue = (style: CssProps) => {
-  return Object.keys(style)
-    .map((key) => key.trim())
-    .map((key) => {
-      const noOutput =
-        (style[key] != null && typeof style[key] === 'object') ||
-        typeof style[key] === 'undefined' ||
-        style[key] === '';
-      return noOutput ? '' : `${camelToHyphens(key)}:${style[key]};`;
-    })
-    .join('');
-};
-
-const updateOneBlock = (css: string[], cssTemp: string[], className: string, mediaQuery?: string) => {
-  if (cssTemp.length > 0) {
-    const cssText = wrapCss(className, cssTemp.join(''), mediaQuery);
-    css.push(cssText);
-    cssTemp.length = 0;
-  }
-};
-
-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 (!classSelector) {
-          console.warn(`No className is defined for: ${camelToHyphens(i)}:${value};`);
-        }
-        cssTemp.push(`${camelToHyphens(i)}:${value};`);
-      }
-    } else {
-      updateOneBlock(css, cssTemp, outClassName, mediaQuery);
-
-      if (i.startsWith('@keyframes')) {
-        const cssText = Object.keys(value)
-          .map((stageKey) => stageKey + '{' + processStyleValue(value[stageKey] as CssProps) + '}')
-          .join('');
-        css.push(`${i}{${cssText}}`);
-      } else if (i.startsWith('@media')) {
-        const ret = processStyleSub(topUniqueClassName, classSelector, value, i);
-        css.push(...ret);
-      } else {
-        // '&:hover, &.open': {
-        //     '>.d1, .d2': {...},
-        // }, ==>
-        // &:hover >.d1, &:hover >.d2, &.open >.d1, &.open .d2
-
-        // '.aa': {
-        //     '&:hover': {...},
-        //     '.bb': {...},
-        // }, ==>
-        // .aa:hover, .aa .bb
-        const newClassSelector = !classSelector
-          ? i
-          : classSelector
-              .split(',')
-              .map((key0) => key0.trim())
-              .map((key0) => {
-                return i
-                  .split(',')
-                  .map((key) => key.trim())
-                  .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;
-                    const newKey = key.startsWith('&') ? key0 + key.substring(1) : key0 + ' ' + key;
-                    return newKey.replace(/&/g, topUniqueClassName);
-                  })
-                  .join(',');
-              })
-              .join(',');
-        const ret = processStyleSub(topUniqueClassName, newClassSelector, value, mediaQuery);
-        css.push(...ret);
-      }
-    }
-  }
-  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 = (topUniqueClassName: string, style: CssProps) => {
-  const el = topUniqueClassName && document.querySelector(`.${topUniqueClassName}`);
-  if (el) {
-    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;
-    } else {
-      const style = document.createElement('style');
-      style.innerHTML = cssText;
-      // style.id = `sty-${selector}`; // sty means style, this is different from mount-components.renderComponent
-      el.prepend(style);
-    }
-  } else {
-    console.warn(`Can't find "${topUniqueClassName}" to update styles.`);
-  }
-};
-
-const updateCssDom = (uniqueStyleId: string, cssText: string, cssDom: HTMLElement | null) => {
-  if (!cssDom) {
-    cssDom = document.createElement('style');
-    cssDom.id = `sty-${uniqueStyleId}`;
-    document.head.appendChild(cssDom);
-  }
-  cssDom.innerText = cssText;
-};
-
-/*
-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.
-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
-*/
-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 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(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, noTopClassName, style });
-  }
-};
-
-const generateThemeStyles = () => {
-  const currentTheme = getCurrentTheme();
-  const themeCss = [];
-  for (let themeName in currentTheme.themes) {
-    // i is for case-insensitive
-    themeCss.push(
-      ...processStyle('', {
-        [`[data-theme="${themeName}" i]`]: currentTheme.themes[themeName],
-      })
-    );
-  }
-  return themeCss.join('\n');
-};
-
-if (typeof document !== 'undefined') {
-  // Update theme in Browser when no SSR
-  bindPageLoadedEvent(() => {
-    const uniqueStyleId = themeCookieName;
-    let cssDom = document.getElementById(`sty-${uniqueStyleId}`);
-    if (!cssDom) {
-      updateCssDom(uniqueStyleId, generateThemeStyles(), cssDom);
-    }
-  });
-}
-
-// 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();
-// };
-// bindPageResetEvent(clearGlobalStyles);
-
-export const generateAllGlobalStyles = () => {
-  const result = [];
-
-  result.push(`<style id="sty-${themeCookieName}">${generateThemeStyles()}</style>`);
-
-  for (let [uniqueStyleId, { topUniqueClassName, noTopClassName, style }] of _globalStyle) {
-    const cssText = processStyle(noTopClassName ? '' : topUniqueClassName, style).join('');
-    result.push(`<style id="sty-${uniqueStyleId}">${cssText}</style>`);
-  }
-
-  // clearGlobalStyles();
-  return result.join('');
-};
+import { uniqueIdGenerator } from 'lupine.components';
+import { CssProps } from '../jsx';
+import { getCurrentTheme, themeCookieName } from './bind-theme';
+import { camelToHyphens } from './camel-to-hyphens';
+// import { bindPageResetEvent } from './page-reset-events';
+import { bindPageLoadedEvent } from './page-loaded-events';
+
+const wrapCss = (className: string, cssText: string, mediaQuery?: string) => {
+  // if (!className) {
+  //   console.warn(`No class name is provided for ${cssText}`);
+  // }
+  let cssTextWrap = className ? `${className}{${cssText}}` : cssText;
+  if (mediaQuery) {
+    cssTextWrap = `${mediaQuery}{${cssTextWrap}}`;
+  }
+  return cssTextWrap;
+};
+
+const processStyleValue = (style: CssProps) => {
+  return Object.keys(style)
+    .map((key) => key.trim())
+    .map((key) => {
+      const noOutput =
+        (style[key] != null && typeof style[key] === 'object') ||
+        typeof style[key] === 'undefined' ||
+        style[key] === '';
+      return noOutput ? '' : `${camelToHyphens(key)}:${style[key]};`;
+    })
+    .join('');
+};
+
+const updateOneBlock = (css: string[], cssTemp: string[], className: string, mediaQuery?: string) => {
+  if (cssTemp.length > 0) {
+    const cssText = wrapCss(className, cssTemp.join(''), mediaQuery);
+    css.push(cssText);
+    cssTemp.length = 0;
+  }
+};
+
+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 (!classSelector) {
+          console.warn(`No className is defined for: ${camelToHyphens(i)}:${value};`);
+        }
+        cssTemp.push(`${camelToHyphens(i)}:${value};`);
+      }
+    } else {
+      updateOneBlock(css, cssTemp, outClassName, mediaQuery);
+
+      if (i.startsWith('@keyframes')) {
+        const cssText = Object.keys(value)
+          .map((stageKey) => stageKey + '{' + processStyleValue(value[stageKey] as CssProps) + '}')
+          .join('');
+        css.push(`${i}{${cssText}}`);
+      } else if (i.startsWith('@media')) {
+        const ret = processStyleSub(topUniqueClassName, classSelector, value, i);
+        css.push(...ret);
+      } else {
+        // '&:hover, &.open': {
+        //     '>.d1, .d2': {...},
+        // }, ==>
+        // &:hover >.d1, &:hover >.d2, &.open >.d1, &.open .d2
+
+        // '.aa': {
+        //     '&:hover': {...},
+        //     '.bb': {...},
+        // }, ==>
+        // .aa:hover, .aa .bb
+        const newClassSelector = !classSelector
+          ? i
+          : classSelector
+              .split(',')
+              .map((key0) => key0.trim())
+              .map((key0) => {
+                return i
+                  .split(',')
+                  .map((key) => key.trim())
+                  .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;
+                    const newKey = key.startsWith('&') ? key0 + key.substring(1) : key0 + ' ' + key;
+                    return newKey.replace(/&/g, topUniqueClassName);
+                  })
+                  .join(',');
+              })
+              .join(',');
+        const ret = processStyleSub(topUniqueClassName, newClassSelector, value, mediaQuery);
+        css.push(...ret);
+      }
+    }
+  }
+  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 = (topUniqueClassName: string, style: CssProps) => {
+  const el = topUniqueClassName && document.querySelector(`.${topUniqueClassName}`);
+  if (el) {
+    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;
+    } else {
+      const style = document.createElement('style');
+      style.innerHTML = cssText;
+      // style.id = `sty-${selector}`; // sty means style, this is different from mount-components.renderComponent
+      el.prepend(style);
+    }
+  } else {
+    console.warn(`Can't find "${topUniqueClassName}" to update styles.`);
+  }
+};
+
+const updateCssDom = (uniqueStyleId: string, cssText: string, cssDom: HTMLElement | null) => {
+  if (!cssDom) {
+    cssDom = document.createElement('style');
+    cssDom.id = `sty-${uniqueStyleId}`;
+    document.head.appendChild(cssDom);
+  }
+  cssDom.innerText = cssText;
+};
+
+/*
+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.
+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
+*/
+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 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(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, noTopClassName, style });
+  }
+};
+
+const generateThemeStyles = () => {
+  const currentTheme = getCurrentTheme();
+  const themeCss = [];
+  for (let themeName in currentTheme.themes) {
+    // i is for case-insensitive
+    themeCss.push(
+      ...processStyle('', {
+        [`[data-theme="${themeName}" i]`]: currentTheme.themes[themeName],
+      })
+    );
+  }
+  return themeCss.join('\n');
+};
+
+if (typeof document !== 'undefined') {
+  // Update theme in Browser when no SSR
+  bindPageLoadedEvent(() => {
+    const uniqueStyleId = themeCookieName;
+    let cssDom = document.getElementById(`sty-${uniqueStyleId}`);
+    if (!cssDom) {
+      updateCssDom(uniqueStyleId, generateThemeStyles(), cssDom);
+    }
+  });
+}
+
+// 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();
+// };
+// bindPageResetEvent(clearGlobalStyles);
+
+export const generateAllGlobalStyles = () => {
+  const result = [];
+
+  result.push(`<style id="sty-${themeCookieName}">${generateThemeStyles()}</style>`);
+
+  for (let [uniqueStyleId, { topUniqueClassName, noTopClassName, style }] of _globalStyle) {
+    const cssText = processStyle(noTopClassName ? '' : topUniqueClassName, style).join('');
+    result.push(`<style id="sty-${uniqueStyleId}">${cssText}</style>`);
+  }
+
+  // clearGlobalStyles();
+  return result.join('');
+};