@windwalker-io/core 4.1.12 → 4.2.0

package/src/next/fusion/processors/cloneAssets.ts

@@ -0,0 +1,81 @@
+import { callback, type ConfigBuilder } from '@windwalker-io/fusion-next';
+import isGlob from 'is-glob';
+import micromatch from 'micromatch';
+import { normalize } from 'node:path';
+import { relative } from 'node:path';
+import { containsMiddleGlob, removeLastGlob, uniqId } from '../../utilities';
+
+export function cloneAssets(patterns: Record<string, string>) {
+  return callback((taskName, builder) => {
+    const reposition = getAvailableForReposition(patterns);
+
+    handleReposition(builder, reposition);
+
+    handleCloneAssets(builder, Object.keys(patterns));
+
+    return null;
+  });
+}
+
+export function getAvailableForReposition(patterns: Record<string, string>) {
+  const reposition: Record<string, string> = {};
+
+  for (const from in patterns) {
+    // If clone from contains middle glob: eg. `assets/**/files`, we cannot handle the naming
+    // Let the naming options to handle it.
+    if (!containsMiddleGlob(from)) {
+      reposition[from] = patterns[from];
+    }
+  }
+
+  return reposition;
+}
+
+export function handleCloneAssets(builder: ConfigBuilder, clonePatterns: string[]) {
+  // An module starts `hidden:` will be ignored by fusion
+  const id = uniqId('hidden:clone-asset-') + '.js';
+
+  const task = builder.addTask(id);
+
+  builder.resolveIdCallbacks.push((src) => {
+    if (src === id) {
+      return id;
+    }
+  });
+
+  builder.loadCallbacks.push((src) => {
+    if (src === id) {
+      const glob = clonePatterns
+        // Replace slash to unix style
+        .map(v => v.replace(/\\/g, '/'))
+        // Glob in virtual module should start with /
+        .map(v => v.startsWith('./') || !v.startsWith('/') ? `/${v}` : v)
+        // wrap with quotes
+        .map(v => `'${v}'`)
+        // join it to string.
+        .join(', ');
+
+      return `import.meta.glob(${glob});\n`;
+    }
+  });
+}
+
+export function handleReposition(builder: ConfigBuilder, reposition: Record<string, string>) {
+  builder.assetFileNamesCallbacks.push((assetInfo) => {
+    const fileName = assetInfo.originalFileName!;
+
+    for (const base in reposition) {
+      if (match(fileName, base)) {
+        return normalize(reposition[base] + relative(removeLastGlob(base), fileName)).replace(/\\/g, '/');
+      }
+    }
+  });
+}
+
+function match(str: string, pattern: string) {
+  if (isGlob(pattern)) {
+    return micromatch.isMatch(str, pattern);
+  }
+
+  return str.startsWith(pattern);
+}

package/src/next/fusion/processors/cssModulize.ts

@@ -0,0 +1,105 @@
+import { stripUrlQuery } from '@/next';
+import { type ConfigBuilder, css, type ProcessorInterface, type ProcessorPreview } from '@windwalker-io/fusion-next';
+import { WatchTask } from '@windwalker-io/fusion-next/src/types';
+import fg from 'fast-glob';
+import fs from 'fs-extra';
+import { parse } from 'node-html-parser';
+import { normalize, resolve } from 'node:path';
+
+export function cssModulize(entry: string, dest: string) {
+  return new CssModulizeProcessor(css(entry, dest));
+}
+
+class CssModulizeProcessor implements ProcessorInterface {
+
+  constructor(
+    protected processor: ReturnType<typeof css>,
+    protected bladePatterns: string[] = [],
+    protected cssPatterns: string[] = []
+  ) {
+
+  }
+
+  parseBlades(...bladePatterns: (string[] | string)[]) {
+    this.bladePatterns = this.bladePatterns.concat(bladePatterns.flat());
+
+    return this;
+  }
+
+  mergeCss(...css: (string[] | string)[]) {
+    this.cssPatterns = this.cssPatterns.concat(css.flat());
+
+    return this;
+  }
+
+  config(taskName: string, builder: ConfigBuilder) {
+    const tasks = this.processor.config(taskName, builder);
+    const task = tasks[0];
+    const inputFile = resolve(task.input);
+
+    // get blade styles and add watches
+    const bladeFiles = fg.globSync(this.bladePatterns);
+
+    for (const file of bladeFiles) {
+      builder.watches.push({
+        file,
+        moduleFile: inputFile,
+        updateType: 'css-update',
+      } satisfies WatchTask);
+    }
+
+    builder.loadCallbacks.push((src, options) => {
+      const file = stripUrlQuery(src);
+
+      if (normalize(file) === inputFile) {
+        const patterns = fg.globSync(
+          this.cssPatterns.map((v) => resolve(v))
+            .map(v => v.replace(/\\/g, '/'))
+        );
+
+        const imports = patterns
+          .map((pattern) => `@import "${pattern}";`)
+          .concat(this.parseStylesFromBlades(bladeFiles))
+          .join('\n');
+
+        let main = fs.readFileSync(file, 'utf-8');
+
+        main += `\n\n${imports}\n`;
+
+        return main;
+      }
+    });
+
+    return undefined;
+  }
+
+  parseStylesFromBlades(files: string[]) {
+    return files.map((file) => {
+      const bladeText = fs.readFileSync(file, 'utf8');
+
+      const html = parse(bladeText);
+
+      return html.querySelectorAll('style[type][data-macro],script[type][data-macro]')
+        .filter(
+          (el) => ['text/scss', 'text/css'].includes(el.getAttribute('type') || '')
+        )
+        .map((el) => {
+          const scope = el.getAttribute('data-scope');
+
+          if (scope) {
+            return `${scope} {
+          ${el.innerHTML}
+        }`;
+          } else {
+            return el.innerHTML;
+          }
+        });
+    })
+      .filter((c) => c.length > 0)
+      .flat();
+  }
+
+  preview(): ProcessorPreview[] {
+    return [];
+  }
+}

package/src/next/fusion/processors/index.ts

@@ -0,0 +1,4 @@
+export { cssModulize } from './cssModulize';
+export { jsModulize } from './jsModulize';
+export { installVendors } from './installVendors';
+export { cloneAssets } from './cloneAssets';

package/src/next/fusion/processors/installVendors.ts

@@ -0,0 +1,178 @@
+import { callbackAfterBuild, copyGlob, symlink } from '@windwalker-io/fusion-next';
+import fs from 'fs-extra';
+import path from 'node:path';
+import { loadJson } from '../../utilities';
+
+export function installVendors(
+  npmVendors: string[] = [],
+  to: string = 'www/assets/vendor',
+) {
+  return callbackAfterBuild(() => findAndInstall(npmVendors, to));
+}
+
+enum InstallAction {
+  LINK = 'Link',
+  COPY = 'Copy',
+}
+
+export async function findAndInstall(npmVendors: string[] = [], to = 'www/assets/vendor') {
+  const root = to;
+  let vendors = npmVendors;
+  const action = process.env.INSTALL_VENDOR === 'hard' ? InstallAction.COPY : InstallAction.LINK;
+
+  console.log("");
+
+  if (!fs.existsSync(root)) {
+    fs.mkdirSync(root);
+  }
+
+  const dirs = fs.readdirSync(root, { withFileTypes: true })
+    .filter(d => d.isDirectory())
+    .map(dir => path.join(root, dir.name));
+
+  dirs.unshift(root);
+
+  dirs.forEach((dir) => {
+    deleteExists(dir);
+  });
+
+  const composerJsons = getInstalledComposerVendors()
+    .map((cv) => `vendor/${cv}/composer.json`)
+    .map((file) => loadJson(file))
+    .filter((composerJson) => composerJson?.extra?.windwalker != null);
+
+  // Install npm vendors
+  vendors = findNpmVendors(composerJsons).concat(vendors);
+  vendors = [...new Set(vendors)];
+
+  for (const vendor of vendors) {
+    const source = `node_modules/${vendor}/`;
+    if (fs.existsSync(source)) {
+      console.log(`[${action} NPM] node_modules/${vendor}/ => ${root}/${vendor}/`);
+      doInstall(source, `${root}/${vendor}/`);
+    }
+  }
+
+  // Install composer packages assets
+  for (const composerJson of composerJsons) {
+    const vendorName = composerJson.name;
+
+    let assets = composerJson?.extra?.windwalker?.assets?.link;
+
+    if (!assets) {
+      continue;
+    }
+
+    if (!assets.endsWith('/')) {
+      assets += '/';
+    }
+
+    if (fs.existsSync(`vendor/${vendorName}/${assets}`)) {
+      console.log(`[${action} Composer] vendor/${vendorName}/${assets} => ${root}/${vendorName}/`);
+      doInstall(`vendor/${vendorName}/${assets}`, `${root}/${vendorName}/`);
+    }
+  }
+
+  // Install legacy packages assets
+  // legacyComposerVendors.forEach((vendorName) => {
+  //   console.log(vendorName, fs.existsSync(`vendor/${vendorName}/assets`));
+  //   if (fs.existsSync(`vendor/${vendorName}/assets`)) {
+  //     console.log(`[${action} Composer] vendor/${vendorName}/assets/ => ${root}/${vendorName}/`);
+  //     doInstall(`vendor/${vendorName}/assets/`, `${root}/${vendorName}/`);
+  //   }
+  // });
+
+  // Install local saved vendors
+  const staticVendorDir = 'resources/assets/vendor/';
+
+  if (fs.existsSync(staticVendorDir)) {
+    const staticVendors = fs.readdirSync(staticVendorDir);
+
+    for (const staticVendor of staticVendors) {
+      if (staticVendor.startsWith('@')) {
+        const subVendors = fs.readdirSync(staticVendorDir + staticVendor);
+
+        for (const subVendor of subVendors) {
+          const subVendorName = staticVendor + '/' + subVendor;
+          const source = staticVendorDir + subVendorName + '/';
+
+          if (fs.existsSync(source)) {
+            console.log(`[${action} Local] resources/assets/vendor/${subVendorName}/ => ${root}/${subVendorName}/`);
+            doInstall(source, `${root}/${subVendorName}/`);
+          }
+        }
+      } else {
+        let source = staticVendorDir + staticVendor;
+
+        if (fs.existsSync(source)) {
+          console.log(`[${action} Local] resources/assets/vendor/${staticVendor}/ => ${root}/${staticVendor}/`);
+          doInstall(source, `${root}/${staticVendor}/`);
+        }
+      }
+    }
+  }
+}
+
+async function doInstall(source: string, dest: string) {
+  if (process.env.INSTALL_VENDOR === 'hard') {
+    await copyGlob(source + '/**/*', dest);
+  } else {
+    await symlink(source, dest);
+  }
+}
+
+function findNpmVendors(composerJsons: any[] = []) {
+  const pkg = path.resolve(process.cwd(), 'package.json');
+  const pkgJson = loadJson(pkg);
+
+  let vendors = Object.keys(pkgJson.devDependencies || {})
+    .concat(Object.keys(pkgJson.dependencies || {}))
+    .map(id => `node_modules/${id}/package.json`)
+    .map((file) => loadJson(file))
+    .filter(pkgJson => pkgJson?.windwalker != null)
+    .map(pkgJson => pkgJson?.windwalker.vendors || [])
+    .flat();
+
+  const vendorsFromComposer = composerJsons
+    .map((composerJson) => {
+      return [
+        ...composerJson?.extra?.windwalker?.asset_vendors || [],
+        ...composerJson?.extra?.windwalker?.assets?.exposes || [],
+        ...Object.keys(composerJson?.extra?.windwalker?.assets?.vendors || {})
+      ];
+    })
+    .flat();
+
+  return [...new Set(vendors.concat(vendorsFromComposer))];
+}
+
+function getInstalledComposerVendors() {
+  const composerFile = path.resolve(process.cwd(), 'composer.json');
+  const composerJson = loadJson(composerFile);
+
+  return [
+    ...new Set(
+      Object.keys(composerJson['require'] || {})
+        .concat(Object.keys(composerJson['require-dev'] || {}))
+    )
+  ];
+}
+
+function deleteExists(dir: string) {
+  if (!fs.existsSync(dir)) {
+    return;
+  }
+
+  const subDirs = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const subDir of subDirs) {
+    if (subDir.isSymbolicLink() || subDir.isFile()) {
+      fs.unlinkSync(path.join(dir, subDir.name));
+    } else if (subDir.isDirectory()) {
+      deleteExists(path.join(dir, subDir.name));
+    }
+  }
+
+  fs.rmdirSync(dir);
+}
+

package/src/next/fusion/processors/jsModulize.ts

@@ -0,0 +1,296 @@
+import { type FindFileResult, findFilesFromGlobArray, stripUrlQuery } from '@/next';
+import {
+  type BuildTask,
+  type ConfigBuilder,
+  type MaybePromise,
+  type ProcessorInterface,
+  type ProcessorPreview,
+  js,
+  shortHash,
+  plugin as addPlugin,
+} from '@windwalker-io/fusion-next';
+import { WatchTask } from '@windwalker-io/fusion-next/src/types';
+import fs from 'fs-extra';
+import crypto from 'node:crypto';
+import { parse } from 'node-html-parser';
+import { normalize, resolve } from 'node:path';
+
+export interface JsModulizeOptions {
+  tmpPath?: string;
+  cleanTmp?: boolean;
+}
+
+export function jsModulize(entry: string, dest: string, options: JsModulizeOptions = {}) {
+  return new JsModulizeProcessor(js(entry, dest), options);
+}
+
+export class JsModulizeProcessor implements ProcessorInterface {
+  protected scriptPatterns: string[] = [];
+  protected bladePatterns: string[] = [];
+  protected stagePrefix: string = '';
+
+  constructor(protected processor: ReturnType<typeof js>, protected options: JsModulizeOptions = {}) {
+  }
+
+  config(taskName: string, builder: ConfigBuilder) {
+    const tasks = this.processor.config(taskName, builder) as BuildTask[];
+    const task = tasks[0];
+    const inputFile = resolve(task.input);
+    const tmpPath = this.options.tmpPath ?? resolve('./tmp/fusion/jsmodules/').replace(/\\/g, '/');
+    const clean = this.options.cleanTmp ?? true;
+
+    // const appFileName = 'js/' + this.stagePrefix + '/app.js';
+    // const appSrcFileName = 'resources/assets/src/' + this.stagePrefix + '/app.js';
+    // const task = builder.addTask(appFileName);
+
+    if (clean) {
+      builder.postBuildCallbacks.push((options, bundle) => {
+        fs.removeSync(tmpPath);
+      });
+    }
+
+    // builder.merge({
+    //   resolve: {
+    //     alias: {
+    //       '@main': task.input
+    //     }
+    //   }
+    // });
+
+    // builder.entryFileNamesCallbacks.push((chunkInfo) => {
+    //   if (chunkInfo.facadeModuleId === appSrcFileName) {
+    //     return appFileName;
+    //   }
+    // });
+    //
+    // builder.resolveIdCallbacks.push((id) => {
+    //   if (id === task.input) {
+    //     return appSrcFileName;
+    //   }
+    // });
+
+    this.ignoreMainImport(task);
+
+    builder.resolveIdCallbacks.push((id) => {
+      if (id === '@main') {
+        return { id, external: true };
+      }
+    });
+
+    const scriptFiles = findFilesFromGlobArray(this.scriptPatterns);
+    const bladeFiles = parseScriptsFromBlades(this.bladePatterns);
+
+    // Watches
+    // for (const bladeFile of bladeFiles) {
+    //   builder.watches.push({
+    //     file: resolve(bladeFile.file.fullpath),
+    //     moduleFile: inputFile,
+    //     updateType: 'full-reload',
+    //   } satisfies WatchTask);
+    // }
+
+    builder.loadCallbacks.push((src, options) => {
+      const srcFile = stripUrlQuery(src);
+
+      // if (src === appSrcFileName) {
+      if (normalize(srcFile) === inputFile) {
+        let listJS = "{\n";
+
+        // Merge standalone ts files
+        for (const scriptFile of scriptFiles) {
+          let fullpath = scriptFile.fullpath;
+
+          if (fullpath.endsWith('.d.ts')) {
+            continue;
+          }
+
+          let key = scriptFile.relativePath.replace(/assets\//, '').toLowerCase();
+          fullpath = resolve(fullpath).replace(/\\/g, '/');
+
+          key = key.substring(0, key.lastIndexOf('.'));
+
+          if (this.stagePrefix) {
+            key = this.stagePrefix + '/' + key;
+          }
+
+          // md5
+          key = 'view:' + crypto.createHash('md5').update(key).digest('hex');
+
+          listJS += `'${key}': () => import('${fullpath}'),\n`;
+        }
+
+        // Parse from blades
+        const listens: string[] = [];
+
+        fs.ensureDirSync(tmpPath);
+
+        for (const result of bladeFiles) {
+          let key = result.as;
+          const tmpFile = tmpPath + '/' + result.path.replace(/\\|\//g, '_') + '-' + shortHash(result.code) + '.ts';
+
+          if (!fs.existsSync(tmpFile) || fs.readFileSync(tmpFile, 'utf8') !== result.code) {
+            fs.writeFileSync(tmpFile, result.code);
+          }
+
+          // if (this.stagePrefix) {
+          //   key = this.stagePrefix + '/' + key;
+          // }
+
+          listJS += `'inline:${key}': () => import('${tmpFile}'),\n`;
+
+          const fullpath = resolve(result.file.fullpath).replace(/\\/g, '/');
+
+          if (!listens.includes(fullpath)) {
+            listens.push(fullpath);
+          }
+        }
+
+        listJS += "}";
+
+//         const loaderPath = resolve('./vendor/windwalker/core/assets/core/src/next/app.ts')
+//           .replace(/\\/g, '/');
+//
+//         const ts = `
+// import { App } from '${loaderPath}';
+//
+// const app = new App();
+// app.registerRoutes(${listJS});
+//
+// export default app;
+//   `;
+
+        // Listen extra files
+        builder.watches.push(...listens);
+
+        let { code, comments } = stripComments(fs.readFileSync(srcFile, 'utf-8'));
+
+        // Replace `defineJsModules(...)`
+        code = code.replace(/defineJsModules\((.*?)\)/g, listJS);
+
+        return restoreComments(code, comments);
+      }
+    });
+
+    return undefined;
+  }
+
+  /**
+   * @see https://github.com/vitejs/vite/issues/6393#issuecomment-1006819717
+   * @see https://stackoverflow.com/questions/76259677/vite-dev-server-throws-error-when-resolving-external-path-from-importmap
+   */
+  private ignoreMainImport(task: BuildTask) {
+    const VALID_ID_PREFIX = `/@id/`;
+    const importKeys = ['@main'];
+    const reg = new RegExp(
+      `${VALID_ID_PREFIX}(${importKeys.join("|")})`,
+      "g"
+    );
+
+    addPlugin({
+      name: 'keep-main-external-' + task.id,
+      transform(code) {
+        return reg.test(code) ? code.replace(reg, (m, s1) => s1) : code;
+      }
+    });
+  }
+
+  preview(): MaybePromise<ProcessorPreview[]> {
+    return [];
+  }
+
+  mergeScripts(...patterns: (string | string[])[]) {
+    this.scriptPatterns = this.scriptPatterns.concat(patterns.flat());
+
+    return this;
+  }
+
+  parseBlades(...bladePatterns: (string[] | string)[]) {
+    this.bladePatterns = this.bladePatterns.concat(bladePatterns.flat());
+
+    return this;
+  }
+
+  stage(stage: string) {
+    this.stagePrefix = stage;
+
+    return this;
+  }
+}
+
+interface ScriptResult {
+  as: string;
+  file: FindFileResult;
+  path: string;
+  code: string;
+}
+
+// function parseScriptsFromBlade(file: string, service: Record<string, ParsedModule>): string[] {
+//   const bladeText = fs.readFileSync(file, 'utf8');
+//
+//   const html = parse(bladeText);
+//
+//   return html.querySelectorAll('script[lang]')
+//     .filter(
+//       (el) => ['ts', 'typescript'].includes(el.getAttribute('lang') || '')
+//     )
+//     .map((el) => el.innerHTML)
+//     .filter((c) => c.trim() !== '');
+// }
+
+function parseScriptsFromBlades(patterns: string | string[]): ScriptResult[] {
+  let files = findFilesFromGlobArray(Array.isArray(patterns) ? patterns : [patterns]);
+
+  return files.map((file) => {
+    const bladeText = fs.readFileSync(file.fullpath, 'utf8');
+
+    const html = parse(bladeText);
+    // const key = file.relativePath.replace(/.blade.php$/, '').toLowerCase();
+
+    return html.querySelectorAll('script[lang][data-macro]')
+      .filter(
+        (el) => ['ts', 'typescript'].includes(el.getAttribute('lang') || '')
+      )
+      .map((el) => ({
+        as: el.getAttribute('data-macro') || '',
+        file: file,
+        path: file.relativePath.replace(/.blade.php$/, ''),
+        code: el.innerHTML
+      }))
+      .filter((c) => c.code.trim() !== '');
+  })
+    .flat();
+}
+
+type CommentPlaceholder = { key: string; value: string; };
+
+function stripComments(code: string): { code: string; comments: CommentPlaceholder[] } {
+  const comments: CommentPlaceholder[] = [];
+  let i = 0;
+
+  code = code
+    // Multi-line /* */
+    .replace(/\/\*[\s\S]*?\*\//g, match => {
+      const key = `__COMMENT_BLOCK_${i}__`;
+      comments.push({ key, value: match });
+      i++;
+      return key;
+    })
+    // Single-line //
+    .replace(/\/\/.*$/gm, match => {
+      const key = `__COMMENT_LINE_${i}__`;
+      comments.push({ key, value: match });
+      i++;
+      return key;
+    });
+
+  return { code, comments };
+}
+
+function restoreComments(code: string, comments: CommentPlaceholder[]): string {
+  for (const { key, value } of comments) {
+    const re = new RegExp(key, 'g');
+    code = code.replace(re, value);
+  }
+
+  return code;
+}

package/src/next/index.ts

@@ -0,0 +1,2 @@
+export * from './fusion';
+export * from './utilities';