cdui-js 1.0.7 → 1.0.9

package/build/css.ts

@@ -2,7 +2,7 @@ import fs from 'fs';
 
 export interface Rule {
   match: string;
-  build(outputs: string[], selector: string, value: string): void;
+  build(outputs: string[], selector: string, value: string, before: string[]): void;
 }
 
 export const rules: Rule[] = [
@@ -35,13 +35,13 @@ export const rules: Rule[] = [
   },
   {
     match: '.border-c',
-    build: (outputs: string[], selector: string, value: string) => {
+    build: (outputs: string[], selector: string, value: string, before: string[]) => {
       if (selector === '.border-c') {
-        outputs.push(`.border { border-color: ${value} }`);
-        outputs.push(`.border-t { border-top-color: ${value} }`);
-        outputs.push(`.border-r { border-right-color: ${value} }`);
-        outputs.push(`.border-b { border-bottom-color: ${value} }`);
-        outputs.push(`.border-l { border-left-color: ${value} }`);
+        before.push(`.border { border-color: ${value} }`);
+        before.push(`.border-t { border-top-color: ${value} }`);
+        before.push(`.border-r { border-right-color: ${value} }`);
+        before.push(`.border-b { border-bottom-color: ${value} }`);
+        before.push(`.border-l { border-left-color: ${value} }\n`);
       }
 
       outputs.push(`${selector} { border-color: ${value} }`);
@@ -143,9 +143,9 @@ export const rules: Rule[] = [
   },
   {
     match: '.icon-c',
-    build: (outputs: string[], selector: string, value: string) => {
+    build: (outputs: string[], selector: string, value: string, before: string[]) => {
       if (selector === '.icon-c') {
-        outputs.unshift(`body { stroke: ${value}; fill: ${value}; }\n.icon { stroke: inherit; fill: inherit; }\n`);
+        before.push(`body { stroke: ${value}; fill: ${value}; }\n.icon { stroke: inherit; fill: inherit; }`);
       }
 
       outputs.push(`${selector} { stroke: ${value}; fill: ${value}; }`);
@@ -153,9 +153,9 @@ export const rules: Rule[] = [
   },
   {
     match: '.icon-s',
-    build: (outputs: string[], selector: string, value: string) => {
+    build: (outputs: string[], selector: string, value: string, before: string[]) => {
       if (selector === '.icon-s') {
-        outputs.unshift(`.icon { width: ${value}; height: ${value}; }\n`);
+        before.push(`.icon { width: ${value}; height: ${value}; }\n`);
       }
 
       outputs.push(`${selector} .icon { width: ${value}; height: ${value}; }`);
@@ -188,32 +188,39 @@ const findRule = (name: string) => {
   }
 };
 
-const parse = (rule: Rule, outputs: string[], selectorPrefix: string, name: string, value: string) => {
+const parse = (
+  rule: Rule,
+  outputs: string[],
+  selectorPrefix: string,
+  name: string,
+  value: string,
+  before: string[],
+) => {
   if (name.endsWith('-hover')) {
-    rule.build(outputs, selectorPrefix + name + ':hover', value);
-    rule.build(outputs, selectorPrefix + '.hover:hover ' + name, value);
+    rule.build(outputs, selectorPrefix + name + ':hover', value, before);
+    rule.build(outputs, selectorPrefix + '.hover:hover ' + name, value, before);
     return;
   }
 
   if (name.endsWith('-active')) {
-    rule.build(outputs, selectorPrefix + name + ':active', value);
-    rule.build(outputs, selectorPrefix + '.active:active ' + name, value);
+    rule.build(outputs, selectorPrefix + name + ':active', value, before);
+    rule.build(outputs, selectorPrefix + '.active:active ' + name, value, before);
     return;
   }
 
   if (name.endsWith('-focus')) {
-    rule.build(outputs, selectorPrefix + name + ':focus', value);
-    rule.build(outputs, selectorPrefix + '.focus:focus ' + name, value);
+    rule.build(outputs, selectorPrefix + name + ':focus', value, before);
+    rule.build(outputs, selectorPrefix + '.focus:focus ' + name, value, before);
     return;
   }
 
   if (name.endsWith('-selected')) {
-    rule.build(outputs, selectorPrefix + name + '.selected', value);
-    rule.build(outputs, selectorPrefix + '.selected ' + name, value);
+    rule.build(outputs, selectorPrefix + name + '.selected', value, before);
+    rule.build(outputs, selectorPrefix + '.selected ' + name, value, before);
     return;
   }
 
-  rule.build(outputs, selectorPrefix + name, value);
+  rule.build(outputs, selectorPrefix + name, value, before);
 };
 
 /**
@@ -227,6 +234,7 @@ export const buildCSS = (cssRuleFile: string, cssFile?: string) => {
   let lines = css.split(/\r?\n\s*/);
   let selectorPrefix = '';
   let outputs = [];
+  let before = [];
 
   for (let i = 0, l = lines.length; i < l; i++) {
     let line = lines[i].trim();
@@ -241,7 +249,7 @@ export const buildCSS = (cssRuleFile: string, cssFile?: string) => {
           value = line.slice(index + 1);
 
           if ((value = value.replace(/}\s*\;*\s*/, '').trim())) {
-            rule.build(outputs, selectorPrefix + name, value);
+            rule.build(outputs, selectorPrefix + name, value, before);
           }
 
           continue;
@@ -255,7 +263,7 @@ export const buildCSS = (cssRuleFile: string, cssFile?: string) => {
             .trim();
 
           if (value && value !== '#') {
-            parse(rule, outputs, selectorPrefix, name, value);
+            parse(rule, outputs, selectorPrefix, name, value, before);
           }
 
           continue;
@@ -283,6 +291,7 @@ export const buildCSS = (cssRuleFile: string, cssFile?: string) => {
     }
   }
 
+  outputs.unshift(...before);
   css = outputs.join('\n');
 
   if (cssFile) {

package/package.json

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

package/src/components/Dialog.ts

@@ -1,36 +1,36 @@
-import { createRoot } from 'solid-js';
-
-import { JSX } from '../jsx';
-
-/**
- * 对话框
- */
-export type Dialog = HTMLElement & {
-  /**
-   * 关闭对话框方法
-   */
-  close(): void;
-};
-
-/**
- * 显示对话框
- *
- * @param component 对话框组件
- * @returns 关闭对话框方法
- */
-export const showDialog = (component: () => JSX.Element): Dialog => {
-  return createRoot((dispose) => {
-    let body = document.body;
-    let dialog = component() as Dialog;
-
-    dialog.style.cssText = 'position:fixed;z-index:9';
-    body.appendChild(dialog);
-
-    dialog.close = () => {
-      body.removeChild(dialog);
-      dispose();
-    };
-
-    return dialog;
-  });
-};
+import { createRoot } from 'solid-js';
+
+import { JSX } from '../jsx';
+
+/**
+ * 对话框
+ */
+export type Dialog = HTMLElement & {
+  /**
+   * 关闭对话框方法
+   */
+  close(): void;
+};
+
+/**
+ * 显示对话框
+ *
+ * @param component 对话框组件
+ * @returns 关闭对话框方法
+ */
+export const showDialog = (component: () => JSX.Element): Dialog => {
+  return createRoot((dispose) => {
+    let body = document.body;
+    let dialog = component() as Dialog;
+
+    dialog.style.cssText = 'position:fixed;z-index:9';
+    body.appendChild(dialog);
+
+    dialog.close = () => {
+      body.removeChild(dialog);
+      dispose();
+    };
+
+    return dialog;
+  });
+};

package/src/components/For.ts

@@ -1,26 +1,26 @@
-import { createMemo, mapArray } from 'solid-js';
-
-import { JSX } from '../jsx';
-
-export const For = <T, U extends JSX.Element>(props: {
-  /**
-   * 要循环的数据集合
-   */
-  each: readonly T[];
-  /**
-   * 子节点
-   *
-   * @param item 数据项
-   * @param index 索引
-   * @returns JSX.Element
-   */
-  children: (item: T, index: () => number) => U;
-}) => {
-  return createMemo(
-    mapArray(() => props.each, props.children),
-    void 0,
-    {
-      name: 'value',
-    }
-  ) as unknown as JSX.Element;
-};
+import { createMemo, mapArray } from 'solid-js';
+
+import { JSX } from '../jsx';
+
+export const For = <T, U extends JSX.Element>(props: {
+  /**
+   * 要循环的数据集合
+   */
+  each: readonly T[];
+  /**
+   * 子节点
+   *
+   * @param item 数据项
+   * @param index 索引
+   * @returns JSX.Element
+   */
+  children: (item: T, index: () => number) => U;
+}) => {
+  return createMemo(
+    mapArray(() => props.each, props.children),
+    void 0,
+    {
+      name: 'value',
+    }
+  ) as unknown as JSX.Element;
+};

package/src/components/If.ts

@@ -1,14 +1,14 @@
-import { createMemo } from 'solid-js';
-
-import { JSX } from '../jsx';
-
-/**
- * 条件渲染
- *
- * @param props 属性集合
- */
-export const If = (props: { when: any; children: JSX.Element | JSX.Element[]; else?: JSX.Element | JSX.Element[] }) => {
-  return createMemo(() => {
-    return props.when ? props.children : props.else;
-  }) as unknown as JSX.Element;
-};
+import { createMemo } from 'solid-js';
+
+import { JSX } from '../jsx';
+
+/**
+ * 条件渲染
+ *
+ * @param props 属性集合
+ */
+export const If = (props: { when: any; children: JSX.Element | JSX.Element[]; else?: JSX.Element | JSX.Element[] }) => {
+  return createMemo(() => {
+    return props.when ? props.children : props.else;
+  }) as unknown as JSX.Element;
+};

package/src/components/KeepAlive.ts

@@ -1,26 +1,26 @@
-import { JSX, createMemo, createRoot, onCleanup } from 'solid-js';
-
-export const KeepAlive = (props: {
-  /**
-   * 是否显示
-   */
-  show: boolean;
-  children: JSX.Element | JSX.Element[];
-}) => {
-  let root, ondestory;
-
-  onCleanup(() => {
-    ondestory && ondestory();
-  });
-
-  return createMemo(() => {
-    return (
-      props.show &&
-      (root ||
-        (root = createRoot((dispose) => {
-          ondestory = dispose;
-          return props.children;
-        })))
-    );
-  }) as unknown as JSX.Element;
-};
+import { JSX, createMemo, createRoot, onCleanup } from 'solid-js';
+
+export const KeepAlive = (props: {
+  /**
+   * 是否显示
+   */
+  show: boolean;
+  children: JSX.Element | JSX.Element[];
+}) => {
+  let root, ondestory;
+
+  onCleanup(() => {
+    ondestory && ondestory();
+  });
+
+  return createMemo(() => {
+    return (
+      props.show &&
+      (root ||
+        (root = createRoot((dispose) => {
+          ondestory = dispose;
+          return props.children;
+        })))
+    );
+  }) as unknown as JSX.Element;
+};

package/src/reactive.ts

@@ -64,10 +64,10 @@ export interface SSRRenderPage {
   abort?: boolean;
 }
 
+const signalOptions: any = { equals: false, internal: true };
 const proxyMap = new WeakMap();
 
-const arrayMutationMethods = (() => {
-  let names = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse', 'fill', 'copyWithin'];
+const arrayToKeys = (names: string[]) => {
   let result = Object.create(null);
 
   for (let i = 0, l = names.length; i < l; i++) {
@@ -75,7 +75,19 @@ const arrayMutationMethods = (() => {
   }
 
   return result;
-})();
+};
+
+const arrayMutationMethods = arrayToKeys([
+  'push',
+  'pop',
+  'shift',
+  'unshift',
+  'splice',
+  'sort',
+  'reverse',
+  'fill',
+  'copyWithin',
+]);
 
 function arrayProxyGetHandler(target: any, property: any, receiver) {
   let index = typeof property === 'string' && +property;
@@ -105,19 +117,11 @@ function arrayProxyGetHandler(target: any, property: any, receiver) {
       let set = handler.fn;
 
       return function () {
-        let array = target.slice(0);
-        let result = value.apply(array, arguments);
-
-        // 返回的不是对象
-        if (result !== array) {
-          set(new Proxy(array, handler));
-          return result;
-        }
-
-        let proxy = new Proxy(array, handler);
+        let result = value.apply(target, arguments);
 
-        set(proxy);
-        return proxy;
+        // 触发更新
+        set(receiver);
+        return result !== target ? result : receiver;
       };
     }
 
@@ -133,20 +137,20 @@ function arrayProxySetHandler(target: any, property: any, value, receiver) {
 
   // 如果是通过索引设置值
   if (property >= 0) {
-    target = target.slice(0);
     target[index] = value;
 
-    this.fn(new Proxy(target, this));
+    // 触发更新
+    this.fn(receiver);
     return true;
   }
 
   // 如果设置的是length属性
   if (property === 'length') {
     if (target.length !== value) {
-      target = target.slice(0);
       target.length = value;
 
-      this.fn(new Proxy(target, this));
+      // 触发更新
+      this.fn(receiver);
       return true;
     }
 
@@ -159,7 +163,7 @@ function arrayProxySetHandler(target: any, property: any, value, receiver) {
 const createArraySignal = (value: any[]) => {
   let handler = { get: arrayProxyGetHandler, set: arrayProxySetHandler, fn: null };
   let proxy = new Proxy(value, handler);
-  let signal = createSignal(proxy);
+  let signal = createSignal(proxy, signalOptions);
 
   handler.fn = signal[1];
 
@@ -177,7 +181,18 @@ const reactiveObject = (object) => {
   const proxy = new Proxy(object, {
     get(target, property, receiver) {
       if (property !== '__raw__') {
-        return (signals[property] || initSignal(signals, property, target[property]))[0]();
+        let value = (signals[property] || initSignal(signals, property, target[property]))[0]();
+
+        if (typeof value !== 'object' || !value) {
+          return value;
+        }
+
+        // 已经是代理对象
+        if (value.__raw__) {
+          return value;
+        }
+
+        return proxyMap.get(value) || (isArray(value) ? createArraySignal(value)[0]() : reactiveObject(value));
       }
 
       return target;
@@ -188,7 +203,7 @@ const reactiveObject = (object) => {
         value = value.__raw__ || value;
       }
 
-      (signals[property] || initSignal(signals, property, target[property]))[1](value);
+      (signals[property] || initSignal(signals, property, target[property]))[1]((target[property] = value));
       return true;
     },
 
@@ -202,22 +217,26 @@ const reactiveObject = (object) => {
   return proxy;
 };
 
+const throwReactiveError = () => {
+  throw new Error(`Array cannot directly create reactive object，Please use like: reactive({ items: [] })`);
+};
+
 /**
  * 创建响应式对象
  *
  * @param object 要封装为响应的对象
  */
-export const reactive = <T extends { [key: string | symbol]: any }>(object: T): T => {
+export const reactive = <T extends { [key: string]: any }>(object: T extends any[] ? never : T): T => {
   if (object && typeof object === 'object') {
     // 已经是代理对象
     if (object.__raw__) {
       return object;
     }
 
-    return proxyMap.get(object) || (isArray(object) ? createArraySignal(object)[0]() : reactiveObject(object));
+    return proxyMap.get(object) || (!isArray(object) && reactiveObject(object)) || throwReactiveError();
   }
 
-  return object;
+  throw new Error(`${object} can not create reactive object`);
 };
 
 /**