cdui-js 1.0.2 → 1.0.4

package/README.md

@@ -4,8 +4,6 @@
 
 # MVVM响应式编程
 
-为便于团队合作，建议项目中的所有代码都使用`typescrpt`，本项目使用与`React`类似的响应式`MVVM`框架作为主要开发方式。
-
 响应式`（Reactivity）`增强了应用程序的交互性。这种编程范式是指系统自动响应数据或状态变化的能力，确保用户界面 (UI) 和状态保持同步，从而减少手动更新的需要。
 
 

package/build/icons.ts

@@ -2,12 +2,12 @@ import fs from 'fs';
 import path from 'path';
 
 /**
- * 从指定 svg 文件读取 symbol 内容
+ * 从指定 svg 文件加载 symbol 内容
  *
  * @param svgFile 指定 svg 文件
  * @param removeColor 去色标记 fill: 去填充色  stroke：去描边色  both：都去
  */
-export const readIconFile = (svgFile: string, removeColor?: 'fill' | 'stroke' | 'both'): string => {
+export const loadIconFile = (svgFile: string, removeColor?: 'fill' | 'stroke' | 'both'): string => {
   let name = path.basename(svgFile).replace('.svg', '');
   let svg = fs.readFileSync(svgFile, 'utf8');
   let index = svg.indexOf(' viewBox="');
@@ -46,7 +46,7 @@ export const readIconFile = (svgFile: string, removeColor?: 'fill' | 'stroke' |
  * @param svgDirectory 指定 svg 目录
  * @param removeColor 去色标记 fill: 去填充色  stroke：去描边色  both：都去
  */
-export const readIconsDirectory = (svgDirectory: string, removeColor?: 'fill' | 'stroke' | 'both'): string => {
+export const loadIconsDirectory = (svgDirectory: string, removeColor?: 'fill' | 'stroke' | 'both'): string => {
   const outputs = [];
   const files = fs.readdirSync(svgDirectory);
 
@@ -54,7 +54,7 @@ export const readIconsDirectory = (svgDirectory: string, removeColor?: 'fill' |
     let file = path.join(svgDirectory, files[i]);
 
     if (path.extname(file) === '.svg') {
-      outputs.push(readIconFile(file, removeColor));
+      outputs.push(loadIconFile(file, removeColor));
     }
   }
 
@@ -62,12 +62,12 @@ export const readIconsDirectory = (svgDirectory: string, removeColor?: 'fill' |
 };
 
 /**
- * 把图标 symbol 内容写入 html 文件
+ * 把图标 symbol 内容保存到 html 文件中
  *
  * @param htmlFile html 文件路径
  * @param symbols 图标 symbol 集合
  */
-export const writeIconsToHtml = (htmlFile: string, symbols: string) => {
+export const saveIconsToHtml = (htmlFile: string, symbols: string) => {
   let html = fs.readFileSync(htmlFile, 'utf8');
   let index = html.indexOf('<svg id="ICONS" ');
 
@@ -91,12 +91,12 @@ export const writeIconsToHtml = (htmlFile: string, symbols: string) => {
 };
 
 /**
- * 写 svg 图标到模块文件
+ * 把 svg 图标保存到模块文件中
  *
  * @param moduleFile 模块文件名
  * @param symbols svg 图标内容
  */
-export const writeIconsModule = (moduleFile: string, symbols: string) => {
+export const saveIconsModule = (moduleFile: string, symbols: string) => {
   fs.writeFileSync(
     moduleFile,
     `import { loadSvgIcons } from 'cdui-js';

package/package.json

@@ -1,25 +1,24 @@
 {
   "name": "cdui-js",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "main": "src/index.ts",
   "bin": {
     "cdui-js": "./cli/bin.js"
   },
   "scripts": {
-    "dev": "vite --config vite.config.ts",
-    "build": "vite build --config vite.config.ts"
   },
   "dependencies": {
+    "chalk": "^5.6.2",
     "commander": "^14.0.3",
-    "inquirer": "^13.3.0",
     "download-git-repo": "^3.0.2",
-    "chalk": "^5.6.2",
     "fs-extra": "^11.3.3",
+    "inquirer": "^13.3.0",
     "solid-js": "^1.9.10",
     "vite-plugin-solid": "^2.11.10"
   },
   "devDependencies": {
+    "@types/node": "^25.3.3",
     "typescript": "~5.6.2"
   }
-}
+}

package/src/components/Switch.tsx

@@ -10,7 +10,7 @@ export interface SwitchProps {
      */
     component: () => JSX.Element;
     /**
-     * 捉拿
+     * 缓存 key
      */
     keepalive?: string;
   };

package/src/index.ts

@@ -35,34 +35,4 @@ export * from './components/Carousel';
 export * from './components/KeepAlive';
 export * from './components/Dialog';
 
-declare global {
-  export interface ImportMeta {
-    // 配置环境变量类型
-    env: {
-      /**
-       * 应用运行模式
-       */
-      MODE: string;
-
-      /**
-       * 是否服务端渲染
-       */
-      SSR: boolean;
-
-      /**
-       * 是否浏览器模式
-       */
-      VITE_BROWSER: boolean;
-
-      /**
-       * API基础路径
-       */
-      VITE_API_BASE_URL: string;
-
-      /**
-       * 是否开启 API Mock
-       */
-      VITE_API_MOCK: boolean;
-    };
-  }
-}
+export * from './ssr/render';

package/src/location.ts

@@ -62,7 +62,7 @@ export const location: Location = reactive({
 });
 
 export const parseQuery = (search: string) => {
-  let query = {};
+  let query: any = {};
   let items = search.slice(1).split('&');
   let item;
 
@@ -95,12 +95,12 @@ export const parseQuery = (search: string) => {
  */
 export const updateURL = (path: string, search?: string, hash?: string) => {
   location.url = path + (search || '') + (hash || '');
-  location.hash = hash;
+  location.hash = hash || '';
 
   if (location.path !== path || location.search !== search) {
     location.path = path;
     location.paths = path.match(/\/[^/]*/g) || [];
-    location.search = search;
+    location.search = search || '';
     location.query = search ? parseQuery(search) : {};
   }
 };

package/src/reactive.ts

@@ -8,7 +8,7 @@ export interface ServerContext {
   /**
    * 异步等待集合
    */
-  promises: Promise<any>[];
+  promises: any[];
   /**
    * 已经获取的异步缓存
    */
@@ -33,6 +33,36 @@ export const setServerContext = (context: ServerContext) => {
   serverContext = context;
 };
 
+/**
+ * 服务端渲染页面配置
+ */
+export interface SSRRenderPage {
+  /**
+   * 页面路径
+   */
+  path: string;
+
+  /**
+   * 搜索
+   */
+  search?: string;
+
+  /**
+   * 页面 title 集合，(key 为语言代码)
+   */
+  title?: string;
+
+  /**
+   * 页面描述集合，(key 为语言代码)
+   */
+  description?: string;
+
+  /**
+   * 出现异常时是否终止渲染（渲染终止）
+   */
+  abort?: boolean;
+}
+
 class ReactiveArray {}
 
 /**

package/src/ssr/render.ts

@@ -0,0 +1,178 @@
+export type { SSRRenderPage } from '../reactive';
+
+// 预先加载 window 补丁
+import './window';
+
+import path from 'path';
+// fs/promises 不稳定，有时会出现异步错误无法捕获的异步
+import fs, { PathLike, PathOrFileDescriptor, WriteFileOptions } from 'fs';
+
+import { Component, createComponent } from 'solid-js';
+import { generateHydrationScript, renderToString } from 'solid-js/web';
+
+import { updateURL } from '../location';
+import { SSRRenderPage, ServerContext, setServerContext } from '../reactive';
+
+const exists = (path: PathLike): Promise<boolean> => {
+  return new Promise((resolve, reject) => {
+    fs.stat(path, (err, stats) => {
+      if (err) {
+        resolve(false);
+      } else {
+        resolve(true);
+      }
+    });
+  });
+};
+
+const mkdir = (path: PathLike) => {
+  return new Promise((resolve, reject) => {
+    fs.mkdir(path, { recursive: true }, (err) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(void 0);
+      }
+    });
+  });
+};
+
+const writeFile = (path: PathOrFileDescriptor, data: string | DataView, options: WriteFileOptions): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    fs.writeFile(path, data, options, (err) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(void 0);
+      }
+    });
+  });
+};
+
+const renderToStringAsync = async <T>(context: ServerContext, fn: () => T) => {
+  while (true) {
+    setServerContext(context);
+
+    let html = renderToString(fn);
+
+    if (context.promises[0]) {
+      await Promise.all(context.promises);
+      context.promises.length = 0;
+    } else {
+      return html;
+    }
+  }
+};
+
+/**
+ * 渲染单个页面
+ */
+const renderPage = async (
+  App: Component<any>,
+  languages: { [key: string]: any },
+  language: string,
+  root: string,
+  template: string,
+  page: SSRRenderPage,
+) => {
+  let context = { promises: [], cache: new Map(), ssr: {} };
+  let title = page.title;
+  let description = page.description;
+  let scripts = [];
+
+  // 设置当前路由路径
+  updateURL(page.path, page.search);
+
+  // 渲染html
+  let html = await renderToStringAsync(context, () => createComponent(App, null));
+
+  // 多语言
+  if (language !== 'en') {
+    template = template.replace('lang="en"', 'lang="' + language + '"');
+
+    if (languages[language]) {
+      scripts.push('<script type="text/javascript">window.I18N=' + JSON.stringify(languages[language]) + '</script>');
+    }
+  }
+
+  if (Object.getOwnPropertyNames(context.ssr).length > 0) {
+    scripts.push('<script type="text/javascript">window.SSR=' + JSON.stringify(context.ssr) + '</script>');
+  }
+
+  scripts.push(generateHydrationScript());
+
+  // 插入内容
+  html = template.replace('<!-- ssr-body -->', html);
+
+  // 插入头部脚本
+  html = html.replace('<!-- ssr-head -->', scripts.join(''));
+
+  if (title) {
+    html = html.replace(/\<title\>[^<]+/, '<title>' + title);
+  }
+
+  if (description) {
+    html = html.replace(
+      /\<meta\s+name\=\"description\"\s+content\=\"[^"]+/,
+      '<meta name="description" content="' + description,
+    );
+  }
+
+  let file = path.join(root, 'ssr', language, page.path);
+  let dir = path.dirname(file);
+
+  if (!(await exists(dir))) {
+    await mkdir(dir);
+  }
+
+  await writeFile(file, html, 'utf8');
+};
+
+/**
+ * 服务端渲染错误集合
+ */
+export const SSR_ERRORS = [];
+
+/**
+ * 渲染服务端页面集合
+ */
+export const renderSSRPages = async (
+  App: Component<any>,
+  languages: { [key: string]: any },
+  language: string,
+  root: string,
+  template: string,
+  pages: SSRRenderPage[],
+) => {
+  // @ts-ignore
+  if (import.meta.env.SSR) {
+    for (let i = 0, l = pages.length; i < l; i++) {
+      let page = pages[i];
+
+      try {
+        let now = Date.now();
+
+        console.log(`rendering：${language} ${page.path}`);
+
+        await renderPage(App, languages, language, root, template, page);
+
+        console.log(`rendered: ${language} ${page.path}  time: ${Date.now() - now}`);
+      } catch (err) {
+        console.error(err);
+        SSR_ERRORS.push(err.message + ': ' + (err.cause || { message: '...' }).message);
+
+        // 页面渲染失败终止渲染
+        if (page.abort) {
+          break;
+        }
+      }
+    }
+
+    if (SSR_ERRORS[0]) {
+      return Promise.reject({
+        language,
+        errors: SSR_ERRORS,
+      });
+    }
+  }
+};

package/src/ssr/window/index.ts

@@ -0,0 +1 @@
+import './storage';

package/src/ssr/window/storage.ts

@@ -0,0 +1,27 @@
+// @ts-ignore
+if (import.meta.env.SSR) {
+  // @ts-ignore
+  const localStorage = new Map();
+
+  // @ts-ignore
+  global.localStorage = global.sessionStorage = {
+    get length() {
+      return localStorage.size;
+    },
+    key(index) {
+      return localStorage.keys()[index];
+    },
+    getItem(key) {
+      return localStorage.get(key) || '';
+    },
+    setItem(key, value) {
+      localStorage.set('' + key, '' + value);
+    },
+    removeItem(key) {
+      localStorage.delete(key);
+    },
+    clear() {
+      localStorage.clear();
+    },
+  };
+}

package/ssr-package.js

@@ -0,0 +1,14 @@
+export const SSRPackageJSON = JSON.stringify({
+  name: '@cdui-js/ssr',
+  private: true,
+  version: '0.0.0',
+  type: 'module',
+  main: 'server.js',
+  devDependencies: {
+    express: '^4.21.2',
+    commander: '^12.1.0',
+    'html-minifier': '^4.0.0',
+    'solid-js': '^1.9.10',
+  },
+  dependencies: {},
+});

package/tsconfig.json

@@ -0,0 +1,42 @@
+/**
+ * @link https://www.typescriptlang.org/tsconfig
+ * @link https://cn.vuejs.org/guide/typescript/overview#configuring-tsconfig-json
+ * @link https://cn.vite.dev/guide/features#typescript-compiler-options
+ */
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    // "jsxFactory": "h",
+    // "jsxFragmentFactory": "Fragment",
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "useDefineForClassFields": true,
+    "experimentalDecorators": true,
+    // baseUrl 用来告诉编译器到哪里去查找模块，使用非相对模块时必须配置此项
+    "baseUrl": ".",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    // 非相对模块导入的路径映射配置，根据 baseUrl 配置进行路径计算，与 vite.config 中 alias 配置同步
+    "paths": {},
+    "resolveJsonModule": true,
+    "types": [],
+    // 允许导入 .ts .mts .tsx 拓展名的文件
+    "allowImportingTsExtensions": true,
+    // 允许 JS
+    // "allowJs": true,
+    // TS 严格模式
+    // "strict": true,
+    "importHelpers": true,
+    // 不输出任何编译后的文件，只进行类型检查
+    "noEmit": true,
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  }
+}

package/vite.config.ts

@@ -1,35 +0,0 @@
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { defineConfig } from 'vite';
-
-import VitePlugin from 'vite-plugin-solid';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-/**
- * h5构建方法
- */
-export default defineConfig({
-  root: __dirname,
-  base: '/',
-  plugins: [
-    VitePlugin({})
-  ],
-  build: {
-    // target: 'es2015',
-    modulePreload: false,
-    outDir: path.join(__dirname, 'dist'),
-    emptyOutDir: true,
-    rollupOptions: {
-      input: path.join(__dirname, 'index.html'),
-      output: {
-        entryFileNames: 'js/[name]-[hash].js',
-        chunkFileNames: 'js/[name]-[hash].js',
-        assetFileNames: '[ext]/[name]-[hash].[ext]',
-      },
-    },
-    minify: false,
-    sourcemap: true,
-  }
-});