lvyjs 0.2.1 → 0.2.2

package/README.md

@@ -2,4 +2,4 @@
 
 一款为 node 构建的开发工具
 
-https://github.com/lemonade-lab/lvyjs
+https://github.com/lvyjs/core

package/bin/index.js

@@ -7,18 +7,21 @@ const args = [...process.argv.slice(2)]
 const currentFilePath = fileURLToPath(import.meta.url)
 const currentDirPath = dirname(currentFilePath)
 const pkgFilr = join(currentDirPath, '../package.json')
+
+const jsFile = join(currentDirPath, '../lib/index.js')
+const jsdir = relative(process.cwd(), jsFile)
+
+let tsxDir = join(currentDirPath, '../../tsx/dist/cli.mjs')
+if (!existsSync(tsxDir)) {
+  tsxDir = join(currentDirPath, '../node_modules/tsx/dist/cli.mjs')
+}
+if (!existsSync(tsxDir)) {
+  tsxDir = join(process.cwd(), 'node_modules/tsx/dist/cli.mjs')
+}
+
 // 启动模式
 if (args.includes('build')) {
-  const jsFile = join(currentDirPath, '../lib/index.js')
-  const jsdir = relative(process.cwd(), jsFile)
   const argsx = args.filter(arg => arg !== 'build')
-  let tsxDir = join(currentDirPath, '../../tsx/dist/cli.mjs')
-  if (!existsSync(tsxDir)) {
-    tsxDir = join(currentDirPath, '../node_modules/tsx/dist/cli.mjs')
-  }
-  if (!existsSync(tsxDir)) {
-    tsxDir = join(process.cwd(), 'node_modules/tsx/dist/cli.mjs')
-  }
   const msg = fork(tsxDir, [jsdir, '--lvy-build', ...argsx], {
     stdio: 'inherit',
     env: Object.assign({}, process.env, {
@@ -31,21 +34,13 @@ if (args.includes('build')) {
     process.exit()
   }
 } else if (args.includes('dev')) {
-  const jsFile = join(currentDirPath, '../lib/index.js')
-  const jsdir = relative(process.cwd(), jsFile)
   const argsx = args.filter(arg => arg !== 'dev')
   const argv = [
-    ...(args.includes('--no-watch') ? [] : ['watch', '--clear-screen=false']),
+    args.includes('--no-watch') ? '' : 'watch',
+    '--clear-screen=false',
     jsdir,
     '--lvy-dev'
   ]
-  let tsxDir = join(currentDirPath, '../../tsx/dist/cli.mjs')
-  if (!existsSync(tsxDir)) {
-    tsxDir = join(currentDirPath, '../node_modules/tsx/dist/cli.mjs')
-  }
-  if (!existsSync(tsxDir)) {
-    tsxDir = join(process.cwd(), 'node_modules/tsx/dist/cli.mjs')
-  }
   const msg = fork(tsxDir, [...argv, ...argsx], {
     stdio: 'inherit',
     env: Object.assign({}, process.env, {

package/lib/esbuild/config.js

@@ -0,0 +1,4 @@
+const assetsReg = /\.(png|jpg|jpeg|gif|svg|webp|ico)$/
+const cssReg = /\.(css|scss|less|sass|less)$/
+
+export { assetsReg, cssReg }

package/lib/esbuild/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ *
+ * @param input
+ * @returns
+ */
+declare const ESBuild: (input: string) => Promise<string>
+
+export { ESBuild }

package/lib/esbuild/index.js

@@ -0,0 +1,62 @@
+import esbuild from 'esbuild'
+import { esBuildCSS } from './plugins/css.js'
+import { esBuildAlias } from './plugins/alias.js'
+import { esBuildAsstes } from './plugins/Asstes.js'
+
+// 插件
+const plugins = []
+/**
+ *
+ */
+const initPlugins = () => {
+  if (typeof global.lvyConfig?.alias != 'boolean') {
+    plugins.push(esBuildAlias(global.lvyConfig.alias))
+  }
+  if (typeof global.lvyConfig?.assets != 'boolean') {
+    plugins.push(esBuildAsstes(global.lvyConfig.assets))
+  }
+  if (typeof global.lvyConfig?.styles != 'boolean') {
+    plugins.push(esBuildCSS(global.lvyConfig?.styles ?? {}))
+  }
+}
+/**
+ *
+ * @param input
+ * @returns
+ */
+const ESBuild = async input => {
+  // 如果没有配置
+  if (!global.lvyConfig) global.lvyConfig = {}
+  if (!global.lvyConfig.esbuild) global.lvyConfig.esbuild = {}
+  // 没有插件时，检查是否有可用插件。
+  if (plugins.length === 0) {
+    // init plugisn
+    await initPlugins()
+  }
+  const options = global.lvyConfig?.esbuild?.options ?? {}
+  const pl = options?.plugins ?? []
+  // 构建
+  const result = await esbuild.build({
+    // 入口文件
+    entryPoints: [input],
+    //
+    bundle: true,
+    // 平台
+    platform: 'node',
+    // 输出格式
+    format: 'esm',
+    // 不写入文件
+    write: false,
+    // 忽略所有外部依赖
+    external: ['*'],
+    ...options,
+    plugins: [...plugins, ...pl]
+  })
+  if (!result.outputFiles) {
+    return ''
+  }
+  // 返回结果
+  return result.outputFiles.map(file => new TextDecoder().decode(file.contents)).join('\n')
+}
+
+export { ESBuild }

package/lib/esbuild/plugins/Asstes.js

@@ -0,0 +1,26 @@
+import { assetsReg } from '../config.js'
+import { generateModuleContent } from '../utils/content.js'
+
+/**
+ *
+ * @param param0
+ */
+const esBuildAsstes = optoins => {
+  // 默认配置
+  const filter = optoins?.filter ?? assetsReg
+  // 返回插件
+  return {
+    name: 'assets',
+    setup(build) {
+      build.onLoad({ filter }, args => {
+        const content = generateModuleContent(args.path)
+        return {
+          contents: content,
+          loader: 'js'
+        }
+      })
+    }
+  }
+}
+
+export { esBuildAsstes }

package/lib/esbuild/plugins/alias.js

@@ -0,0 +1,41 @@
+import { join, resolve } from 'path'
+
+/**
+ *
+ * @param alias
+ * @returns
+ */
+const esBuildAlias = alias => {
+  const entries = alias?.entries
+  return {
+    name: 'alias',
+    setup(build) {
+      // 解析路径时使用 entries
+      if (entries) {
+        build.onResolve({ filter: /.*/ }, args => {
+          const url = args.path
+          for (const { find, replacement } of entries) {
+            if (typeof find === 'string' && url.startsWith(find)) {
+              // 字符串匹配
+              const resolvedPath = join(replacement, url.slice(find.length))
+              const absolutePath = resolve(resolvedPath)
+              return {
+                path: absolutePath
+              }
+            } else if (find instanceof RegExp && find.test(url)) {
+              // 正则匹配
+              const resolvedPath = url.replace(find, replacement)
+              const absolutePath = resolve(resolvedPath)
+              return {
+                path: absolutePath
+              }
+            }
+          }
+          return null
+        })
+      }
+    }
+  }
+}
+
+export { esBuildAlias }

package/lib/esbuild/plugins/css.d.ts

@@ -0,0 +1,6 @@
+type ESBuildCSSOptions = {
+  filter?: RegExp
+  configPath?: string
+}
+
+export type { ESBuildCSSOptions }

package/lib/esbuild/plugins/css.js

@@ -0,0 +1,27 @@
+import { generateCSSModuleContent } from '../utils/content.js'
+import { cssReg } from '../config.js'
+
+/**
+ * css资源处理插件
+ * @param param0
+ * @returns
+ */
+const esBuildCSS = optoins => {
+  const filter = optoins?.filter || cssReg
+  // 返回插件
+  return {
+    name: 'css-loader',
+    setup(build) {
+      // 加载 CSS/SCSS 文件
+      build.onLoad({ filter }, args => {
+        const contents = generateCSSModuleContent(args.path)
+        return {
+          contents: contents,
+          loader: 'js'
+        }
+      })
+    }
+  }
+}
+
+export { esBuildCSS }

package/lib/esbuild/utils/content.js

@@ -0,0 +1,59 @@
+import { join } from 'path'
+import crypto from 'node:crypto'
+
+/**
+ * @param inputPath
+ * @returns
+ */
+const convertPath = inputPath => {
+  return process.platform === 'win32' ? inputPath.replace(/\\/g, '/') : inputPath
+}
+/**
+ * 生成模块内容
+ * @param {string} relativePath 相对路径
+ */
+const generateModuleContent = relativePath => {
+  const contents = [
+    'const createUrl = (basePath, path) => {',
+    "const platform = ['linux', 'android', 'darwin'];",
+    'const T = platform.includes(process.platform);',
+    'const reg = T ? /^file:\\/\\// : /^file:\\/\\/\\//;',
+    "return new URL(path, basePath).href.replace(reg, '');",
+    '};',
+    `const fileUrl = createUrl(import.meta.url, '${convertPath(relativePath)}');`,
+    'export default fileUrl;'
+  ].join('\n')
+  return contents
+}
+const getRandomName = str => {
+  // 使用 MD5 算法创建哈希对象
+  const hash = crypto.createHash('md5')
+  // 更新哈希对象内容
+  hash.update(str)
+  return hash.digest('hex')
+}
+const chache = {}
+/**
+ *
+ * @param fileUrl
+ * @returns
+ */
+const generateCSSModuleContent = pathURL => {
+  const fileName = getRandomName(pathURL)
+  const outputFileURL = convertPath(
+    join(process.cwd(), 'node_modules', 'lvyjs', 'assets', `${fileName}.css`)
+  )
+  if (!chache[pathURL]) {
+    global.lvyWorkerProt.postMessage({
+      type: 'CSS_MODULE_GENERATED',
+      payload: {
+        from: pathURL,
+        to: outputFileURL
+      }
+    })
+    chache[pathURL] = true
+  }
+  return `export default "${outputFileURL}";`
+}
+
+export { generateCSSModuleContent, generateModuleContent }

package/lib/index.d.ts

@@ -1 +1,3 @@
-export { defineConfig, initConfig, usePlugin } from './loader/store.js';
+export { Options, defineConfig, getOptions, initConfig, usePlugin } from './store.js'
+export { buildAndRun, buildJS } from './rullup/index.js'
+export { ESBuild } from './esbuild/index.js'

package/lib/index.js

@@ -1,42 +1,42 @@
-import { buildAndRun } from './build/rullup.js';
-import { initConfig } from './loader/store.js';
-export { defineConfig, usePlugin } from './loader/store.js';
+import { buildAndRun } from './rullup/index.js'
+export { buildJS } from './rullup/index.js'
+import { initConfig } from './store.js'
+export { defineConfig, getOptions, usePlugin } from './store.js'
+export { ESBuild } from './esbuild/index.js'
 
 /**
  * @param input
  */
 const onDev = async () => {
-    const apps = [];
-    if (Array.isArray(global.lvyConfig?.plugins)) {
-        // 修改config
-        for (const plugin of global.lvyConfig.plugins) {
-            if (!plugin) {
-                continue;
-            }
-            apps.push(plugin(global.lvyConfig));
-        }
+  const apps = []
+  if (Array.isArray(global.lvyConfig?.plugins)) {
+    // 修改config
+    for (const plugin of global.lvyConfig.plugins) {
+      if (!plugin) {
+        continue
+      }
+      apps.push(plugin(global.lvyConfig))
     }
-    // 执行loader
-    await import('./main.js');
-    //
-    for (const app of apps) {
-        if (!app) {
-            continue;
-        }
-        if (typeof app == 'function')
-            app(global.lvyConfig);
+  }
+  // 执行loader
+  await import('./main.js')
+  //
+  for (const app of apps) {
+    if (!app) {
+      continue
     }
-};
+    if (typeof app == 'function') app(global.lvyConfig)
+  }
+}
 const main = async () => {
-    if (process.argv.includes('--lvy-dev')) {
-        await initConfig();
-        onDev();
-    }
-    else if (process.argv.includes('--lvy-build')) {
-        await initConfig();
-        buildAndRun();
-    }
-};
-main();
+  if (process.argv.includes('--lvy-dev')) {
+    await initConfig()
+    onDev()
+  } else if (process.argv.includes('--lvy-build')) {
+    await initConfig()
+    buildAndRun()
+  }
+}
+main()
 
-export { initConfig };
+export { buildAndRun, initConfig }

package/lib/loader.d.ts

@@ -1,15 +1,15 @@
-type LoaderResult = {
-    format?: string;
-    source?: string;
-    shortCircuit?: boolean;
-};
+import { MessagePort } from 'worker_threads'
+
+declare global {
+  var lvyWorkerProt: MessagePort
+}
+declare function initialize({ port, lvyConfig }: { port: any; lvyConfig: any }): Promise<void>
 /**
- *
  * @param url
  * @param context
  * @param defaultLoad
  * @returns
  */
-declare const load: (url: string, context: any, defaultLoad: (url: string, context: any) => Promise<LoaderResult>) => Promise<LoaderResult>;
+declare const load: (url: any, context: any, defaultLoad: any) => Promise<any>
 
-export { load };
+export { initialize, load }

package/lib/loader.js

@@ -1,31 +1,31 @@
-import { ESBuild } from './loader/esbuild.js';
-import { initConfig } from './loader/store.js';
+import { ESBuild } from './esbuild/index.js'
 
-await initConfig();
-const platform = ['linux', 'android', 'darwin'];
-const T = platform.includes(process.platform);
-const reg = T ? /^file:\/\// : /^file:\/\/\//;
-const nodeReg = /(node_modules|node_|node:)/;
-const jsReg = /\.(js|ts|jsx|tsx)$/;
+const platform = ['win32'].includes(process.platform)
+const reg = platform ? /^file:\/\/\// : /^file:\/\//
+const nodeReg = /(node_modules|node_|node:)/
+const jsReg = /\.(js|ts|jsx|tsx)$/
+async function initialize({ port, lvyConfig }) {
+  global.lvyConfig = lvyConfig
+  global.lvyWorkerProt = port
+}
 /**
- *
  * @param url
  * @param context
  * @param defaultLoad
  * @returns
  */
 const load = async (url, context, defaultLoad) => {
-    if (nodeReg.test(url)) {
-        return defaultLoad(url, context);
-    }
-    if (!jsReg.test(url)) {
-        return defaultLoad(url, context);
-    }
-    const code = await ESBuild(url.replace(reg, ''));
-    return defaultLoad(url, {
-        format: 'module',
-        source: code
-    });
-};
+  if (nodeReg.test(url)) {
+    return defaultLoad(url, context)
+  }
+  if (!jsReg.test(url)) {
+    return defaultLoad(url, context)
+  }
+  const code = await ESBuild(url.replace(reg, ''))
+  return defaultLoad(url, {
+    format: 'module',
+    source: code
+  })
+}
 
-export { load };
+export { initialize, load }

package/lib/main.js

@@ -1,3 +1,33 @@
-import { register } from 'node:module';
+import module from 'node:module'
+import { MessageChannel } from 'node:worker_threads'
+import { postCSS } from './postcss.js'
 
-register('./loader.js', import.meta.url);
+if (!module.register) {
+  throw new Error(
+    `This version of Node.js (${process.version}) does not support module.register(). Please upgrade to Node v18.19 or v20.6 and above.`
+  )
+}
+const { port1, port2 } = new MessageChannel()
+const cache = {}
+port1.on('message', msg => {
+  if (msg.type == 'CSS_MODULE_GENERATED') {
+    const { from, to } = msg.payload
+    if (!cache[from]) {
+      postCSS(from, to)
+      cache[from] = true
+    }
+  } else if (msg.type == 'JS_MODULE_GENERATED');
+})
+// port1.unref()
+module.register('./loader.js', {
+  parentURL: import.meta.url,
+  data: {
+    port: port2,
+    lvyConfig: {
+      alias: global.lvyConfig.alias,
+      assets: global.lvyConfig.assets,
+      styles: global.lvyConfig.styles
+    }
+  },
+  transferList: [port2]
+})

package/lib/postcss.js

@@ -0,0 +1,100 @@
+import fs from 'fs'
+import postcss from 'postcss'
+import { createRequire } from 'module'
+import { join, resolve, dirname } from 'path'
+
+const require = createRequire(import.meta.url)
+const loadPostcssConfig = configPath => {
+  const plugins = []
+  let aliasEntries = []
+  if (typeof global.lvyConfig?.alias != 'boolean') {
+    aliasEntries = global.lvyConfig.alias?.entries || []
+  }
+  if (aliasEntries.length > 0) {
+    // 创建 postcss-import 插件并配置别名解析
+    try {
+      plugins.push(
+        require('postcss-import')({
+          resolve: (id, basedir) => {
+            // 检查别名
+            for (const entry of aliasEntries) {
+              if (id.startsWith(entry.find)) {
+                const aliasedPath = id.replace(entry.find, entry.replacement)
+                return resolve(basedir, aliasedPath) // 返回绝对路径
+              }
+            }
+            return id // 默认返回原始路径
+          }
+        })
+      )
+    } catch (err) {
+      console.error(err)
+    }
+  }
+  try {
+    if (fs.existsSync(configPath)) {
+      const cfg = require(configPath)
+      // 添加其他插件
+      if (!Array.isArray(cfg.plugins)) {
+        const keys = Object.keys(cfg.plugins)
+        keys.forEach(key => {
+          try {
+            const pluginConfig = cfg.plugins[key]
+            const plugin = require(key)
+            if (typeof plugin === 'function') {
+              plugins.push(plugin(pluginConfig))
+            } else {
+              throw new Error(`插件 ${key} 不是有效的 PostCSS 插件函数`)
+            }
+          } catch (err) {
+            console.error(`加载 PostCSS 插件 ${key} 失败:`, err)
+          }
+        })
+      } else {
+        plugins.push(...cfg.plugins)
+      }
+      return { plugins }
+    } else {
+      throw new Error(`未找到 PostCSS 配置文件: ${configPath}`)
+    }
+  } catch (err) {
+    console.error('加载 PostCSS 配置失败:', err)
+    return { plugins }
+  }
+}
+const postCSS = (inputPath, outputPath) => {
+  const configPath = join(process.cwd(), 'postcss.config.cjs')
+  const postcssConfig = loadPostcssConfig(configPath)
+  const readAndProcessCSS = async () => {
+    const css = fs.readFileSync(inputPath, 'utf-8')
+    fs.mkdirSync(dirname(outputPath), { recursive: true })
+    const result = await postcss(postcssConfig.plugins).process(css, {
+      from: inputPath,
+      to: outputPath
+    })
+    fs.writeFileSync(outputPath, result.css)
+    if (result.warnings().length) {
+      result.warnings().forEach(warn => {
+        console.warn(warn.toString())
+      })
+    }
+    const dependencies = result.messages
+      .filter(msg => msg.type === 'dependency')
+      .map(msg => msg.file)
+    for (const dep of dependencies) {
+      fs.watch(dep, eventType => {
+        if (eventType === 'change') {
+          readAndProcessCSS()
+        }
+      })
+    }
+  }
+  readAndProcessCSS()
+  fs.watch(inputPath, eventType => {
+    if (eventType === 'change') {
+      readAndProcessCSS()
+    }
+  })
+}
+
+export { postCSS }

package/lib/rullup/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 打包 JS
+ * *** 注意 **
+ * 和initConfig配合使用
+ * **
+ * 确保已经初始化了配置
+ * @param inputs
+ * @param output
+ */
+declare const buildJS: (inputs: string[]) => Promise<void>
+/**
+ *
+ * @param script
+ */
+declare function buildAndRun(): Promise<void>
+
+export { buildAndRun, buildJS }