@into-mini/sfc-split-plugin 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@into-mini/sfc-split-plugin",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "MIT",
   "keywords": [
     "loader",
@@ -32,13 +32,14 @@
     "slash": "^5.1.0",
     "webpack-virtual-modules": "^0.6.2",
     "yaml": "^2.8.2",
-    "yaml-patch-loader": "^0.1.0",
+    "@into-mini/clsx": "^0.1.0",
     "@into-mini/sfc-transformer": "^0.5.12",
-    "@into-mini/wxml-loader": "^0.0.0",
-    "@into-mini/clsx": "^0.1.0"
+    "@into-mini/sfc-split-loader": "^0.0.0",
+    "@into-mini/wxml-loader": "^0.0.0"
   },
   "peerDependencies": {
     "@babel/core": "^7.28.5",
+    "mini-css-extract-plugin": "^2.9.4",
     "webpack": "^5.103.0"
   },
   "engines": {

package/plugin/entry-rename.mjs

@@ -0,0 +1,109 @@
+/* eslint-disable no-continue */
+import path from 'node:path';
+
+const pluginName = 'EntryRenamePlugin';
+
+export class EntryRenamePlugin {
+  options;
+
+  constructor(options = {}) {
+    this.options = options;
+  }
+
+  getIssuerPath(issuerModule) {
+    return (
+      issuerModule?.nameForCondition?.() ??
+      issuerModule?.resource ??
+      issuerModule?.identifier?.()
+    );
+  }
+
+  matchIssuer(issuerPath) {
+    const { issuer } = this.options;
+
+    if (!issuer) {
+      return true;
+    }
+
+    if (!issuerPath) {
+      return false;
+    }
+
+    if (issuer instanceof RegExp) {
+      return issuer.test(issuerPath);
+    }
+
+    if (typeof issuer === 'function') {
+      return issuer(issuerPath);
+    }
+
+    return issuerPath.includes(issuer);
+  }
+
+  matchTest(filename) {
+    const { test } = this.options;
+
+    if (!test) {
+      return true;
+    }
+
+    if (test instanceof RegExp) {
+      return test.test(filename);
+    }
+
+    if (typeof test === 'function') {
+      return test(filename);
+    }
+
+    return filename.includes(test);
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+      const { Compilation } = compiler.webpack;
+      compilation.hooks.processAssets.tap(
+        { name: pluginName, stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS },
+        () => {
+          for (const module of compilation.modules) {
+            const filename = module.buildInfo?.filename;
+
+            if (!filename) {
+              continue;
+            }
+
+            if (!this.matchTest(filename)) {
+              continue;
+            }
+
+            const issuerModule = compilation.moduleGraph.getIssuer(module);
+            const issuerPath = this.getIssuerPath(issuerModule);
+
+            if (!this.matchIssuer(issuerPath)) {
+              continue;
+            }
+
+            const chunks = compilation.chunkGraph.getModuleChunks(module);
+            const entryChunk = [...chunks].find((chunk) => chunk.name);
+
+            if (!entryChunk?.name) {
+              continue;
+            }
+
+            const ext = path.extname(filename);
+            const newName = `${entryChunk.name}${ext}`;
+
+            if (newName === filename) {
+              continue;
+            }
+
+            if (compilation.getAsset(newName)) {
+              continue;
+            }
+
+            compilation.renameAsset(filename, newName);
+          }
+        },
+      );
+    });
+  }
+}

package/plugin/expose-entry-bk.mjs

@@ -1,11 +1,15 @@
 import slash from 'slash';
+
 const PLUGIN_NAME = 'ExposeEntryNamePlugin';
+
 export class ExposeEntryNamePlugin {
   getEntryNameFromEntries(compilation, module) {
     const { moduleGraph, entries } = compilation;
+
     for (const [name, io] of entries) {
       for (const dep of io.dependencies) {
         const entryModule = moduleGraph.getModule(dep);
+
         if (entryModule) {
           if (
             // @ts-expect-error ------------
@@ -14,6 +18,7 @@ export class ExposeEntryNamePlugin {
           ) {
             return name;
           }
+
           if (
             // @ts-expect-error ------------
             entryModule?.resource && // @ts-expect-error ------------
@@ -24,21 +29,27 @@ export class ExposeEntryNamePlugin {
         }
       }
     }
+
     return '';
   }
+
   getEntryNameFromPathData(compilation, pathData) {
     const mod = pathData.module;
     const graph = pathData.chunkGraph;
+
     if (mod && graph) {
       const [entryModule] = graph
         .getModuleChunks(mod)
         .map((chunk) => [...graph.getChunkEntryModulesIterable(chunk)][0]);
+
       if (entryModule) {
         return this.getEntryNameFromEntries(compilation, entryModule);
       }
     }
+
     return '';
   }
+
   apply(compiler) {
     const {
       NormalModule: { getCompilationHooks },
@@ -50,10 +61,12 @@ export class ExposeEntryNamePlugin {
             compilation,
             pathData,
           );
+
           return entryName
             ? path.replaceAll('[entry]', entryName)
             : path.replaceAll('[entry]', '[hash:8]');
         }
+
         return path;
       });
       getCompilationHooks(compilation).loader.tap(

package/plugin/expose-entry.mjs

@@ -1,22 +1,29 @@
 import slash from 'slash';
+
 const PLUGIN_NAME = 'ExposeEntryNamePlugin';
+
 export class ExposeEntryNamePlugin {
   getEntryNameFromChunk(chunk) {
     if (!chunk?.groupsIterable) {
       return '';
     }
+
     for (const group of chunk.groupsIterable) {
       if (group.isInitial()) {
         return group.name;
       }
     }
+
     return '';
   }
+
   getEntryNameFromEntries(compilation, module) {
     const { moduleGraph, entries } = compilation;
+
     for (const [name, io] of entries) {
       for (const dep of io.dependencies) {
         const entryModule = moduleGraph.getModule(dep);
+
         if (entryModule) {
           if (
             // @ts-expect-error ------------
@@ -25,6 +32,7 @@ export class ExposeEntryNamePlugin {
           ) {
             return name;
           }
+
           if (
             // @ts-expect-error ------------
             entryModule?.resource && // @ts-expect-error ------------
@@ -35,26 +43,34 @@ export class ExposeEntryNamePlugin {
         }
       }
     }
+
     return '';
   }
+
   getEntryNameFromPathData(pathData) {
     if (pathData?.chunk) {
       const entryName = this.getEntryNameFromChunk(pathData.chunk);
+
       if (entryName) {
         return entryName;
       }
     }
+
     if (pathData?.module && pathData?.chunkGraph) {
       const chunks = pathData.chunkGraph.getModuleChunks(pathData.module);
+
       for (const chunk of chunks) {
         const entryName = this.getEntryNameFromChunk(chunk);
+
         if (entryName) {
           return entryName;
         }
       }
     }
+
     return '';
   }
+
   apply(compiler) {
     const {
       NormalModule: { getCompilationHooks },
@@ -63,10 +79,12 @@ export class ExposeEntryNamePlugin {
       compilation.hooks.assetPath.tap(PLUGIN_NAME, (path, pathData) => {
         if (path.includes('[entry]')) {
           const entryName = this.getEntryNameFromPathData(pathData);
+
           return entryName
             ? path.replaceAll('[entry]', entryName)
             : path.replaceAll('[entry]', '[hash:8]');
         }
+
         return path;
       });
       getCompilationHooks(compilation).loader.tap(

package/plugin/sfc-split.mjs

@@ -4,8 +4,8 @@ import { parse } from '@into-mini/sfc-transformer';
 import slash from 'slash';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 
-export class SfcSplitPlugin extends VirtualModulesPlugin {
-  PLUGIN_NAME = 'SfcSplitPlugin';
+export class SfcSplitPluginBase extends VirtualModulesPlugin {
+  PLUGIN_NAME = 'SfcSplitPluginBase';
 
   constructor({ tagMatcher, preserveTap }) {
     super();

package/plugin.mjs

@@ -1,22 +1,18 @@
-/* eslint-disable no-param-reassign */
 import { fileURLToPath } from 'node:url';
 
-import { COMPONENT_ROOT } from './helper/index.mjs';
-import { configKeys } from './helper/utils.mjs';
-import { AddEntryPlugin } from './plugin/add-entry.mjs';
 import { AddWxsPlugin } from './plugin/add-wxs.mjs';
-import { CopyConfigPlugin } from './plugin/copy-config.mjs';
-import { EmitFakePlugin } from './plugin/emit-fake.mjs';
 import { ExposeEntryNamePlugin } from './plugin/expose-entry.mjs';
-import { FindEntryPlugin } from './plugin/find-entry.mjs';
-import { SfcSplitPlugin } from './plugin/sfc-split.mjs';
+// import { EntryRenamePlugin } from './plugin/entry-rename.mjs';
+import { SfcSplitPluginBase } from './plugin/sfc-split.mjs';
 import { MinaRuntimeWebpackPlugin } from './plugin/mina-runtime.mjs';
 
+export const COMPONENT_ROOT = 'as-components';
+
 function reach(path) {
   return fileURLToPath(import.meta.resolve(path));
 }
 
-export class AllInOnePlugin {
+export class SfcSplitPlugin {
   constructor({ type = false, tagMatcher, preserveTap } = {}) {
     this.type = type;
     this.tagMatcher = tagMatcher;
@@ -42,55 +38,25 @@ export class AllInOnePlugin {
         loader: reach('@into-mini/wxml-loader'),
         generator: {
           filename: '[entry][ext]',
+          // filename: '[contenthash:8][ext]',
         },
       },
-      {
-        test: /\.hack$/,
-        type: 'javascript/esm',
-        layer: configKeys.hack,
-        loader: reach('./loader/hack-entry-loader.mjs'),
-      },
     );
   }
 
-  #prepare(compiler) {
-    compiler.options.resolve.extensionAlias ??= {};
-
-    compiler.options.resolve.extensionAlias['.yaml'] = [
-      '.yaml',
-      '.yml',
-      '.json',
-    ];
-
-    compiler.options.resolve.fallback ??= {};
-
-    if (compiler.options.entry?.main) {
-      delete compiler.options.entry.main;
-    }
-
-    Object.assign(compiler, {
-      __entries__: new Map(),
-    });
-  }
-
   apply(compiler) {
-    this.#prepare(compiler);
     this.#applyLoader(compiler);
 
     const { type, tagMatcher, preserveTap } = this;
 
     if (type) {
-      new MinaRuntimeWebpackPlugin().apply(compiler);
-      new AddEntryPlugin().apply(compiler);
       new AddWxsPlugin().apply(compiler);
-      new SfcSplitPlugin({ tagMatcher, preserveTap }).apply(compiler);
+      new MinaRuntimeWebpackPlugin().apply(compiler);
+      new SfcSplitPluginBase({ tagMatcher, preserveTap }).apply(compiler);
       new ExposeEntryNamePlugin().apply(compiler);
-      new FindEntryPlugin({ type }).apply(compiler);
-      new CopyConfigPlugin({ type }).apply(compiler);
-    }
-
-    if (type === 'miniprogram') {
-      new EmitFakePlugin().apply(compiler);
+      // new EntryRenamePlugin({ issuer: /\.vue$/, test: /\.wxml/ }).apply(
+      //   compiler,
+      // );
     }
   }
 }

package/helper/hooks.mjs

@@ -1,48 +0,0 @@
-import { toJSONString } from '@into-mini/sfc-transformer/utils.mjs';
-
-import { readConfig } from './read.mjs';
-
-export function createEmitFile({ PLUGIN_NAME, compilation, RawSource }) {
-  return (name, content) => {
-    compilation.hooks.processAssets.tap(
-      {
-        name: PLUGIN_NAME,
-        stage: compilation.constructor.PROCESS_ASSETS_STAGE_ADDITIONAL,
-      },
-      () => {
-        compilation.emitAsset(
-          name,
-          new RawSource(
-            typeof content === 'string' ? content : toJSONString(content),
-          ),
-        );
-      },
-    );
-  };
-}
-
-export function readAndTrack(compiler, compilation) {
-  return (name) => {
-    const { filePath, config = {} } = readConfig(compiler.context, name);
-
-    if (filePath) {
-      compilation.fileDependencies.add(filePath);
-    }
-
-    return {
-      name: `${name}.json`,
-      content: config,
-      empty: Object.keys(config).length === 0,
-    };
-  };
-}
-
-export function createAddEntry(compiler) {
-  return (name, path) => {
-    new compiler.webpack.EntryPlugin(compiler.context, path, {
-      import: [path],
-      name,
-      // layer: 'base',
-    }).apply(compiler);
-  };
-}

package/helper/index.mjs

@@ -1,62 +0,0 @@
-export const COMPONENT_ROOT = 'as-components';
-
-function unique(...arr) {
-  return [...new Set(arr)];
-}
-
-export function getAllPages(config) {
-  const { entryPagePath, pages, subPackages, tabBar } = config ?? {};
-
-  const { custom = false, list = [] } = tabBar ?? {};
-
-  return unique(
-    entryPagePath,
-    ...(pages ?? []),
-    ...list.map(({ pagePath }) => pagePath),
-    ...(subPackages ?? []).flatMap(
-      (subPackage) =>
-        (subPackage.pages || []).map((page) => `${subPackage.root}/${page}`) ||
-        [],
-    ),
-    custom === true ? 'custom-tab-bar/index' : '',
-  ).filter(Boolean);
-}
-
-export function patchConfig(json) {
-  const object = structuredClone(json ?? {});
-
-  object.pages ??= [];
-
-  if (object.tabBar?.list?.length > 0) {
-    for (const tab of object.tabBar.list) {
-      if (tab.pagePath && !object.pages.includes(tab.pagePath)) {
-        object.pages.push(tab.pagePath);
-      }
-    }
-  }
-
-  object.subPackages ??= [];
-  object.preloadRule ??= {};
-
-  for (const page of object.pages) {
-    object.preloadRule[page] ??= {};
-
-    object.preloadRule[page].network = 'all';
-    object.preloadRule[page].packages ??= [];
-
-    if (!object.preloadRule[page].packages.includes(COMPONENT_ROOT)) {
-      object.preloadRule[page].packages.push(COMPONENT_ROOT);
-    }
-  }
-
-  if (
-    !object.subPackages.some((subPackage) => subPackage.root === COMPONENT_ROOT)
-  ) {
-    object.subPackages.push({
-      root: COMPONENT_ROOT,
-      pages: ['fake'],
-    });
-  }
-
-  return object;
-}

package/helper/read.mjs

@@ -1,37 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { resolve } from 'node:path';
-
-import { parse as yamlParse } from 'yaml';
-
-function tryReadFileWithParsers(base, name, ext, parser) {
-  const filePath = resolve(base, `${name}${ext}`);
-
-  try {
-    const content = readFileSync(filePath, 'utf8');
-
-    return {
-      filePath,
-      config: (parser ? parser(content) : content) || {},
-    };
-  } catch {
-    return false;
-  }
-}
-
-const candidates = [
-  { ext: '.yaml', parser: yamlParse },
-  { ext: '.yml', parser: yamlParse },
-  { ext: '.json', parser: JSON.parse },
-];
-
-export function readConfig(base, name) {
-  for (const { ext, parser } of candidates) {
-    const result = tryReadFileWithParsers(base, name, ext, parser);
-
-    if (result !== false) {
-      return result;
-    }
-  }
-
-  return false;
-}

package/helper/utils.mjs

@@ -1,6 +0,0 @@
-export const configKeys = {
-  app: 'app-json',
-  projectPrivate: 'project.private.config',
-  project: 'project.config',
-  hack: 'hack.entry',
-};

package/loader/hack-entry-loader.mjs

@@ -1,5 +0,0 @@
-export default function loader() {
-  console.log(this._compiler.__entries__);
-
-  return '';
-}

package/plugin/add-entry.mjs

@@ -1,85 +0,0 @@
-export class AddEntryPlugin {
-  PLUGIN_NAME = 'AddEntryPlugin';
-
-  #addSmartEntry({ name, path, layer }) {
-    if (this.compiler.__entries__.get(name) !== path) {
-      this.compiler.__entries__.set(name, { path, layer });
-    }
-  }
-
-  #addEntries(compilation) {
-    const { compiler } = this;
-
-    const { createDependency } = compiler.webpack.EntryPlugin;
-
-    compilation.hooks.buildModule.tap(this.PLUGIN_NAME, () => {
-      for (const [name, { path, layer }] of compiler.__entries__.entries()) {
-        compilation.addEntry(
-          compiler.context,
-          createDependency(path, { name }),
-          {
-            name,
-            import: [path],
-            layer,
-          },
-          (err) => {
-            if (err) {
-              throw err;
-            } else {
-              compilation.fileDependencies.add(path);
-            }
-          },
-        );
-      }
-    });
-  }
-
-  #expose(compiler) {
-    this.compiler = compiler;
-
-    const { PLUGIN_NAME } = this;
-
-    const {
-      NormalModule: { getCompilationHooks },
-    } = compiler.webpack;
-
-    Object.defineProperty(compiler, 'addSmartEntry', {
-      enumerable: true,
-      configurable: false,
-      value: (options) => {
-        this.#addSmartEntry(options);
-      },
-    });
-
-    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
-      getCompilationHooks(compilation).loader.tap(
-        PLUGIN_NAME,
-        (loaderContext) => {
-          Object.defineProperty(loaderContext, 'addSmartEntry', {
-            enumerable: true,
-            configurable: false,
-            value: (options) => {
-              this.#addSmartEntry(options);
-            },
-          });
-        },
-      );
-    });
-  }
-
-  apply(compiler) {
-    this.#expose(compiler);
-
-    const { PLUGIN_NAME } = this;
-
-    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
-      this.#addEntries(compilation);
-    });
-    compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
-      this.#addEntries(compilation);
-    });
-    compiler.hooks.make.tap(PLUGIN_NAME, (compilation) => {
-      this.#addEntries(compilation);
-    });
-  }
-}

package/plugin/copy-config.mjs

@@ -1,89 +0,0 @@
-import { fileURLToPath } from 'node:url';
-
-import { patchConfig } from '../helper/index.mjs';
-import { configKeys } from '../helper/utils.mjs';
-
-function reach(path) {
-  return fileURLToPath(import.meta.resolve(path));
-}
-
-const emptyJSON = reach('../helper/empty.json');
-const yamlLoader = reach('yaml-patch-loader');
-
-export class CopyConfigPlugin {
-  constructor({ type = false } = {}) {
-    this.type = type;
-  }
-
-  addConfigSmartEntry({
-    layer,
-    from = layer,
-    name = layer,
-    filename = from,
-    options,
-  }) {
-    const path = `./${from}.yaml`;
-
-    this.compiler.options.entry[name] = {
-      import: [path],
-      layer,
-      runtime: false,
-      filename,
-    };
-
-    this.compiler.options.resolve.fallback[path] = emptyJSON;
-
-    this.compiler.options.module.rules.push({
-      issuerLayer: layer,
-      loader: yamlLoader,
-      type: 'asset/resource',
-      generator: {
-        filename: `${filename}.json`,
-      },
-      options,
-    });
-  }
-
-  apply(compiler) {
-    const { type } = this;
-    this.compiler = compiler;
-
-    if (type) {
-      this.addConfigSmartEntry({
-        layer: configKeys.project,
-        options: {
-          modify: (json) => ({
-            srcMiniprogramRoot: '',
-            miniprogramRoot: '',
-            pluginRoot: '',
-            ...json,
-            compileType: type,
-          }),
-        },
-      });
-
-      this.addConfigSmartEntry({
-        layer: configKeys.projectPrivate,
-      });
-
-      if (this.type === 'miniprogram') {
-        this.addConfigSmartEntry({
-          layer: configKeys.app,
-          from: 'app',
-          options: {
-            modify: patchConfig,
-          },
-        });
-
-        this.compiler.options.entry.app = {
-          import: ['./app'],
-        };
-
-        // this.compiler.options.entry.__hack__ = {
-        //   import: [reach('../helper/hack.hack')],
-        //   layer: configKeys.hack,
-        // };
-      }
-    }
-  }
-}

package/plugin/emit-fake.mjs

@@ -1,35 +0,0 @@
-import { COMPONENT_ROOT } from '../helper/index.mjs';
-
-const files = {
-  '/fake.json': '{}',
-  '/fake.js': '/**用于创建分包的假页面**/',
-  '/fake.wxml': '<!--用于创建分包的假页面-->',
-};
-
-export class EmitFakePlugin {
-  PLUGIN_NAME = 'EmitFakePlugin';
-
-  apply(compiler) {
-    const {
-      sources: { RawSource },
-      Compilation: { PROCESS_ASSETS_STAGE_ADDITIONAL },
-    } = compiler.webpack;
-
-    compiler.hooks.make.tap(this.PLUGIN_NAME, (compilation) => {
-      compilation.hooks.processAssets.tap(
-        {
-          name: this.PLUGIN_NAME,
-          stage: PROCESS_ASSETS_STAGE_ADDITIONAL,
-        },
-        () => {
-          for (const [path, content] of Object.entries(files)) {
-            compilation.emitAsset(
-              COMPONENT_ROOT + path,
-              new RawSource(content),
-            );
-          }
-        },
-      );
-    });
-  }
-}

package/plugin/find-entry.mjs

@@ -1,111 +0,0 @@
-import { extname } from 'node:path';
-
-import {
-  createAddEntry,
-  createEmitFile,
-  readAndTrack,
-} from '../helper/hooks.mjs';
-import { getAllPages } from '../helper/index.mjs';
-
-/**
- * Webpack插件，用于处理小程序和插件的入口文件
- */
-export class FindEntryPlugin {
-  PLUGIN_NAME = 'FindEntryPlugin';
-
-  /**
-   * @param {Object} options - 插件配置选项
-   * @param {string} [options.type=false] - 项目类型，可选值：'miniprogram'或'plugin'
-   */
-  constructor({ type = false } = {}) {
-    this.type = type;
-  }
-
-  /**
-   * 处理Vue页面入口
-   * @private
-   */
-  #handleVuePages(params, pages, basePath = '.') {
-    const { addEntry, compilation } = params;
-
-    for (const page of pages) {
-      const source = `${basePath}/${page}.vue`;
-      addEntry(page, source);
-      compilation.fileDependencies.add(source);
-    }
-  }
-
-  /**
-   * 处理插件页面和组件
-   * @private
-   */
-  #handlePluginSection(params, config, section) {
-    const entries = config[section];
-
-    if (!entries) {
-      return;
-    }
-
-    Object.entries(entries).forEach(([key, path]) => {
-      if (typeof path === 'string' && extname(path) === '.vue') {
-        const source = `${section}/${key}/index`;
-        params.addEntry(source, path);
-        params.compilation.fileDependencies.add(path);
-
-        if (section === 'pages') {
-          config.pages = config.pages || {};
-          config.pages[key] = source;
-        }
-      }
-    });
-  }
-
-  /**
-   * 处理配置和入口
-   * @private
-   */
-  #processConfig(params, configType) {
-    const { readFrom, emitFile, addEntry, compilation } = params;
-    const { content: config, name } = readFrom(
-      configType === 'miniprogram' ? 'app' : configType,
-    );
-
-    if (configType === 'miniprogram') {
-      this.#handleVuePages(params, getAllPages(config));
-    } else if (configType === 'plugin') {
-      if (config.main) {
-        addEntry('main', config.main);
-        compilation.fileDependencies.add(config.main);
-        config.main = 'main.js';
-      }
-
-      this.#handlePluginSection(params, config, 'pages');
-      this.#handlePluginSection(params, config, 'publicComponents');
-      emitFile(name, config);
-    }
-  }
-
-  apply(compiler) {
-    const {
-      sources: { RawSource },
-    } = compiler.webpack;
-
-    const addEntry = createAddEntry(compiler);
-
-    // 处理入口文件和配置
-    compiler.hooks.compilation.tap(this.PLUGIN_NAME, (compilation) => {
-      const params = {
-        compilation,
-        addEntry,
-        emitFile: createEmitFile({
-          PLUGIN_NAME: this.PLUGIN_NAME,
-          compilation,
-          RawSource,
-        }),
-        readFrom: readAndTrack(compiler, compilation),
-      };
-
-      this.#processConfig(params, this.type);
-    });
-  }
-}