cdui-js 1.0.25 → 1.0.27

package/css/mobile-datepicker.css

@@ -1,75 +1,75 @@
-.mobile-date-picker {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  min-height: calc(44px * 5);
-  position: relative;
-  box-sizing: border-box;
-  user-select: none;
-}
-
-.mobile-date-picker-column {
-  flex: 1;
-  position: relative;
-  min-width: 0;
-}
-
-.mobile-date-picker-column::before {
-  content: '';
-  pointer-events: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  background: linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0.95) 0%,
-      rgba(255, 255, 255, 0) calc(50% - 22px)
-    ),
-    linear-gradient(
-      to top,
-      rgba(255, 255, 255, 0.95) 0%,
-      rgba(255, 255, 255, 0) calc(50% - 22px)
-    );
-}
-
-.mobile-date-picker-column::after {
-  content: '';
-  pointer-events: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 44px;
-  box-sizing: border-box;
-  border-top: 1px solid #e4e4e4;
-  border-bottom: 1px solid #e4e4e4;
-  z-index: 2;
-}
-
-.mobile-date-picker-wheel {
-  --mdp-item-h: 44px;
-  height: calc(var(--mdp-item-h) * 5);
-  overflow-y: auto;
-  touch-action: pan-y;
-  -webkit-overflow-scrolling: touch;
-}
-
-.mobile-date-picker-wheel-inner {
-  position: relative;
-  width: 100%;
-}
-
-.mobile-date-picker-item {
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: var(--mdp-item-h);
-  line-height: var(--mdp-item-h);
-  text-align: center;
-  font-size: 16px;
-  color: #1b212d;
-}
+.mobile-date-picker {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  min-height: calc(44px * 5);
+  position: relative;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+.mobile-date-picker-column {
+  flex: 1;
+  position: relative;
+  min-width: 0;
+}
+
+.mobile-date-picker-column::before {
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.95) 0%,
+      rgba(255, 255, 255, 0) calc(50% - 22px)
+    ),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.95) 0%,
+      rgba(255, 255, 255, 0) calc(50% - 22px)
+    );
+}
+
+.mobile-date-picker-column::after {
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 44px;
+  box-sizing: border-box;
+  border-top: 1px solid #e4e4e4;
+  border-bottom: 1px solid #e4e4e4;
+  z-index: 2;
+}
+
+.mobile-date-picker-wheel {
+  --mdp-item-h: 44px;
+  height: calc(var(--mdp-item-h) * 5);
+  overflow-y: auto;
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mobile-date-picker-wheel-inner {
+  position: relative;
+  width: 100%;
+}
+
+.mobile-date-picker-item {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: var(--mdp-item-h);
+  line-height: var(--mdp-item-h);
+  text-align: center;
+  font-size: 16px;
+  color: #1b212d;
+}

package/demo/src/App.tsx

@@ -1,3 +1,5 @@
+import { onMount, reactive } from '../../src/reactive';
+import { For } from '../../src/components/For';
 import { showPopup } from '../../src/popup';
 import { CanlendarPage } from './pages/Canlendar';
 import { CarouselPage } from './pages/Carousel';
@@ -5,21 +7,87 @@ import { ComboBoxPage } from './pages/ComboBox';
 import { DatePickerPage } from './pages/DatePicker';
 import { FormPage } from './pages/Form';
 
-let objects = [];
-for (let i = 0; i < 1000000; i++) {
-  objects[i] = {};
-}
+// 方法1: SolidJS 的直接引用
+const getSolidStyle = (root) => {
+  const a = root.firstChild.firstChild.nextSibling.nextSibling;
+  const b = a.nextSibling.nextSibling.nextSibling;
+  return [a, b];
+};
+
+const enter = (node, count) => {
+  let child = node.firstChild;
+
+  while (--count) {
+    child = child.firstChild;
+  }
+
+  return child;
+};
+
+const next = (node, count) => {
+  node = node.nextSibling;
+
+  while (--count) {
+    node = node.nextSibling;
+  }
+
+  return node;
+};
+
+(Node.prototype as any).ENTER = function (count) {
+  let child = this.firstChild;
+
+  while (--count) {
+    child = child.firstChild;
+  }
+
+  return child;
+};
+
+const getChildren = (root) => {
+  const a = next(enter(root, 2), 2);
+  const b = next(a, 3);
+
+  return [a, b];
+};
+
+// 方法2: querySelectorAll
+const getQueryStyle = (root) => {
+  return root.querySelectorAll('[dynamic]');
+};
+
+// 方法3: TreeWalker
+const getWalkerStyle = (root) => {
+  const walker = document.createNodeIterator(root, NodeFilter.SHOW_COMMENT);
+  let node;
 
-let map = new WeakMap();
-let now = performance.now();
+  while ((node = walker.nextNode())) {
+    if (node.nodeType === 'dd') {
+    }
+  }
+};
+
+// 测试代码
+const template = document.createElement('div');
+template.innerHTML = `<div><span>Static</span><!><!-- dynamic1 --><span>Middle</span><!><!-- dynamic2 --></div>`;
 
-for (let i = 0; i < 1000000; i++) {
-  map.set(objects[i], i);
-}
+console.log(template);
+const printTime = (name: string, fn: Function) => {
+  let now = performance.now();
 
-console.log(performance.now() - now);
+  for (let i = 0; i < 1000000; i++) {
+    fn();
+  }
+
+  console.log(name, performance.now() - now);
+};
 
-const openDropdown = (align: HTMLElement) => {
+printTime('solid', () => getSolidStyle(template));
+printTime('children', () => getChildren(template));
+printTime('querySelectorAll', () => getQueryStyle(template));
+printTime('TreeWalker', () => getWalkerStyle(template));
+
+const openPopup = (align: HTMLElement) => {
   const popup = showPopup(<div style={{ padding: '100px 0', background: 'silver' }}>11111111111111111111</div>, {
     align,
     transition: true,
@@ -27,13 +95,35 @@ const openDropdown = (align: HTMLElement) => {
 };
 
 export const App = () => {
+  let refButton: HTMLElement;
+  let ref;
+
+  let state = reactive([]);
+
+  onMount(() => {
+    let now = performance.now();
+    for (let i = 0; i < 10000; i++) {
+      let child = ref;
+
+      while ((child = child.nextSibling)) {}
+    }
+    console.log(performance.now() - now);
+  });
+
   return (
     <div style={{ 'min-height': '100%' }}>
-      <CarouselPage></CarouselPage>
-      <CanlendarPage></CanlendarPage>
+      <For each={state.value}>{(item) => <div>{item}</div>}</For>
+      <button ref={refButton as any} onclick={() => state.value.push(Math.random())}>
+        dropdown
+      </button>
+      <For each={state.value}>{(item) => <div>{item}</div>}</For>
+      <button onclick={() => state.value.push(Math.random())}>dropdown</button>
+
+      {/* <CarouselPage></CarouselPage> */}
+      {/* <CanlendarPage></CanlendarPage>
       <DatePickerPage></DatePickerPage>
       <ComboBoxPage></ComboBoxPage>
-      <FormPage></FormPage>
+      <FormPage></FormPage> */}
     </div>
   );
 };

package/demo/src/pages/Canlendar.tsx

@@ -6,7 +6,7 @@ export const CanlendarPage = () => {
   return (
     <div>
       <Canlendar
-        value={new Date()}
+        value="2026-04-04"
         onchange={(event) => {debugger
           console.log(event.detail);
         }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdui-js",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "type": "module",
   "main": "src/index.ts",
   "bin": {

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'

package/src/components/Switch.ts

@@ -21,8 +21,8 @@ export const Switch = (props: SwitchProps) => {
   let disposes = {};
 
   onCleanup(() => {
-    for (let key in disposes) {
-      disposes[key]();
+    for (let id in disposes) {
+      disposes[id]();
     }
 
     roots = disposes = null;

package/src/location.ts

@@ -52,8 +52,10 @@ export const location: Location = reactive({
   query: {},
   paths: [],
   routeTo(url: string, scrollTo?: [number, number]) {
+    // 更新历史
     history.pushState(null, '', url || '');
-    routeTo();
+    // 不能立即取 window.location.pathname，在夸克等浏览取不到最新值
+    updateURL(url || '');
 
     if (isBrowser && scrollTo) {
       window.scrollTo(scrollTo[0] | 0, scrollTo[1] | 0);
@@ -89,47 +91,56 @@ export const parseQuery = (search: string) => {
 /**
  * 更新地址
  *
- * @param path 路径
- * @param search 查询条件
- * @param hash hash
+ * @param url 当前 url
  */
-export const updateURL = (path: string, search?: string, hash?: string) => {
-  location.url = path + (search || '') + (hash || '');
-  location.hash = hash || '';
+export const updateURL = (url: string) => {
+  if (location.url !== url || (url = '')) {
+    let path = url;
+    let search = '';
+    let hash = '';
+    let index;
+
+    if ((index = path.indexOf('#')) >= 0) {
+      hash = path.slice(index);
+      path = path.slice(0, index);
+    }
+
+    if ((index = path.indexOf('?')) >= 0) {
+      search = path.slice(index);
+      path = path.slice(0, index);
+    }
 
-  if (location.path !== path || location.search !== search) {
     batch(() => {
+      location.url = url;
+      location.hash = hash;
       location.path = path;
       location.paths = path.match(/\/[^/]*/g) || [];
-      location.search = search || '';
+      location.search = search;
       location.query = search ? parseQuery(search) : {};
     });
   }
 };
 
 // 浏览器环境
-const routeTo = isBrowser
-  ? (() => {
-      // 更新地址方法
-      const routeTo = () => {
-        let system = window.location;
-
-        updateURL(system.pathname, system.search, system.hash);
-      };
-
-      // 立即更新
-      routeTo();
-
-      // 侦听地址变化
-      window.addEventListener('popstate', () => routeTo(), true);
-      // window.addEventListener(
-      //   'hashchange',
-      //   () => {
-      //     location.hash = '';
-      //   },
-      //   true,
-      // );
-
-      return routeTo;
-    })()
-  : () => {};
+if (isBrowser) {
+  (() => {
+    // 更新地址方法
+    const routeTo = () => {
+      let system = window.location;
+      updateURL(system.pathname + system.search + system.hash);
+    };
+
+    // 立即更新
+    routeTo();
+
+    // 侦听地址变化
+    window.addEventListener('popstate', () => routeTo(), true);
+    // window.addEventListener(
+    //   'hashchange',
+    //   () => {
+    //     location.hash = '';
+    //   },
+    //   true,
+    // );
+  })();
+}