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

package/dist/helper/transform.mjs

@@ -0,0 +1,32 @@
+// @ts-expect-error -------------------
+import babel from '@babel/core';
+export function transformJS(input, absoluteFrom) {
+    const minified = process.env.NODE_ENV === 'production';
+    if (!absoluteFrom.endsWith('.js') || absoluteFrom.endsWith('.mjs')) {
+        return input;
+    }
+    const result = babel.transformSync(input, {
+        presets: [
+            [
+                'babel-preset-evergreen',
+                {
+                    usage: 'pure',
+                    mini: true,
+                },
+            ],
+        ],
+        plugins: [
+            ['@babel/plugin-transform-modules-commonjs', { importInterop: 'none' }],
+        ],
+        targets: 'ios 12, chrome 86',
+        configFile: false,
+        babelrc: false,
+        filename: 'a.mjs',
+        sourceType: 'commonjs',
+        compact: !minified,
+        retainLines: !minified,
+        envName: process.env.NODE_ENV,
+        minified,
+    });
+    return (result?.code || input).replace(';Object.defineProperty(exports,"__esModule",{value:true});', ';');
+}

package/dist/index.mjs

@@ -0,0 +1,58 @@
+import { fileURLToPath } from 'node:url';
+import { AddWxsPlugin } from "./plugin/add-wxs.mjs";
+import { ExposeEntryNamePlugin } from "./plugin/expose-entry.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 SfcSplitPlugin {
+    options;
+    constructor({ type = false, tagMatcher, preserveTap } = {}) {
+        this.options = {
+            type,
+            tagMatcher,
+            preserveTap,
+        };
+    }
+    #applyLoader(compiler) {
+        compiler.options.module.rules.push({
+            test: /\.vue$/,
+            use: [
+                {
+                    loader: reach('./loader/fake-vue-loader.mts'),
+                    options: {
+                        componentRoot: COMPONENT_ROOT,
+                    },
+                },
+                {
+                    loader: reach('@into-mini/sfc-split-loader/src/next.mts'),
+                    options: this.options,
+                },
+            ],
+        }, {
+            test: /\.wxml$/,
+            type: 'asset/resource',
+            loader: reach('@into-mini/wxml-loader'),
+            generator: {
+                filename: '[entry][ext]',
+                // filename: '[contenthash:8][ext]',
+            },
+        });
+    }
+    apply(compiler) {
+        this.#applyLoader(compiler);
+        const { type, tagMatcher, preserveTap } = this.options;
+        if (type) {
+            new AddWxsPlugin().apply(compiler);
+            new MinaRuntimeWebpackPlugin().apply(compiler);
+            new SfcSplitPluginBase({ tagMatcher, preserveTap }).apply(compiler);
+            new ExposeEntryNamePlugin().apply(compiler);
+            // new EntryRenamePlugin({ issuer: /\.vue$/, test: /\.wxml/ }).apply(
+            //   compiler,
+            // );
+        }
+    }
+}

package/dist/loader/fake-vue-loader.mjs

@@ -0,0 +1,118 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { createHash } from 'node:crypto';
+import { join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { toJSONString } from '@into-mini/sfc-transformer/src/utils.mts';
+import slash from 'slash';
+function createShortHash(input) {
+    return createHash('sha256').update(input).digest('hex').slice(0, 8);
+}
+function reach(path) {
+    return fileURLToPath(import.meta.resolve(path));
+}
+function handleImport({ toThis, addSmartEntry, componentRoot, context, rootContext, maps, callback, }) {
+    if (Object.keys(maps).length > 0) {
+        for (const [name, path] of Object.entries(maps)) {
+            if (path.endsWith('.vue') && !path.startsWith('plugin://')) {
+                try {
+                    const absolutePath = slash(path.startsWith('.') ? resolve(context, path) : reach(path));
+                    const relativePath = slash(relative(rootContext, absolutePath));
+                    const hack = relativePath.startsWith('..');
+                    const entryName = hack
+                        ? [
+                            componentRoot,
+                            absolutePath
+                                .split('/')
+                                .slice(-2)
+                                .join('/')
+                                .replace(/\.vue$/, ''),
+                            createShortHash(slash(relativePath)),
+                        ].join('/')
+                        : relativePath.replace(/\.vue$/, '');
+                    const placer = toThis(entryName);
+                    callback({
+                        name,
+                        placer,
+                    });
+                    const entryPath = relativePath.startsWith('..')
+                        ? absolutePath
+                        : `./${relativePath}`;
+                    this.addDependency(resolve(absolutePath));
+                    this.addMissingDependency(resolve(absolutePath));
+                    addSmartEntry({
+                        name: entryName,
+                        path: entryPath,
+                    });
+                }
+                catch (error) {
+                    console.error(error);
+                }
+            }
+        }
+    }
+}
+export default function loader(source, map, meta) {
+    this.cacheable();
+    const callback = this.async();
+    const { componentRoot } = this.getOptions();
+    const { entryName: thisEntryName } = this;
+    const resourcePath = slash(this.resourcePath);
+    const { paths, config, script } = this.processSfcFile({
+        source,
+        resourcePath,
+    });
+    const { rootContext, context } = this;
+    for (const path of paths) {
+        const filePath = join(rootContext, path);
+        this.addDependency(filePath);
+        this.addMissingDependency(filePath);
+    }
+    function toThis(entryName) {
+        return slash(relative(`/${thisEntryName}/..`, `/${entryName}`));
+    }
+    // eslint-disable-next-line unicorn/consistent-function-scoping
+    const addSmartEntry = (io) => {
+        this.addSmartEntry(io);
+    };
+    if (config?.usingComponents) {
+        handleImport.bind(this)({
+            toThis,
+            addSmartEntry,
+            componentRoot,
+            context,
+            rootContext,
+            maps: config.usingComponents,
+            callback({ name, placer }) {
+                config.usingComponents[name] = placer;
+                if (placer.includes(componentRoot)) {
+                    config.componentPlaceholder ??= {};
+                    config.componentPlaceholder[name] = 'view';
+                }
+            },
+        });
+    }
+    if (config?.componentGenerics) {
+        handleImport.bind(this)({
+            toThis,
+            addSmartEntry,
+            componentRoot,
+            context,
+            rootContext,
+            maps: Object.fromEntries(Object.entries(config.componentGenerics)
+                .filter(([_, item]) => item?.default)
+                .map(([key, item]) => [key, item.default])),
+            callback({ name, placer }) {
+                config.componentGenerics[name].default = placer;
+            },
+        });
+    }
+    const file = [
+        ...paths
+            .map((path) => relative(`${resourcePath}/..`, path))
+            .map((path) => `import "./${path}";`),
+        script,
+    ].join('\n');
+    this.emitFile(`${thisEntryName}.json`, toJSONString(config));
+    callback(null, file, map, meta);
+}

package/dist/plugin/add-wxs.mjs

@@ -0,0 +1,48 @@
+import { readFileSync } from 'node:fs';
+import { extname, join, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { CLSX_PLACEHOLDER } from '@into-mini/sfc-transformer/src/utils.mts';
+import slash from 'slash';
+// WXS文件输出路径
+const WXS_FILENAME = 'wxs/clsx.wxs';
+/**
+ * 将clsx.wxs文件添加到编译结果中，并替换WXML文件中的占位符。
+ * 只在发现CLSX_PLACEHOLDER时添加wxs文件，且只添加一次。
+ */
+export class AddWxsPlugin {
+    PLUGIN_NAME = 'AddWxsPlugin';
+    apply(compiler) {
+        const { RawSource } = compiler.webpack.sources;
+        compiler.hooks.compilation.tap(this.PLUGIN_NAME, (compilation) => {
+            compilation.hooks.processAssets.tap({
+                name: this.PLUGIN_NAME,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+            }, (assets) => this.#processAssets(assets, compilation, RawSource));
+        });
+    }
+    #processAssets(assets, compilation, RawSource) {
+        // 处理所有wxml文件
+        for (const [filename, source] of Object.entries(assets)) {
+            if (extname(filename) === '.wxml') {
+                const content = source.source().toString();
+                if (content.includes(CLSX_PLACEHOLDER)) {
+                    this.#addWxsFile(compilation, RawSource);
+                    this.#replaceSource(compilation, RawSource, {
+                        filename,
+                        content,
+                    });
+                }
+            }
+        }
+    }
+    #replaceSource(compilation, RawSource, { filename, content }) {
+        const relativePath = slash(relative(join(filename, '..'), WXS_FILENAME));
+        const newContent = content.replace(CLSX_PLACEHOLDER, relativePath);
+        compilation.updateAsset(filename, new RawSource(newContent));
+    }
+    #addWxsFile(compilation, RawSource) {
+        const wxsPath = import.meta.resolve('@into-mini/clsx/index.wxs');
+        const wxsContent = readFileSync(fileURLToPath(wxsPath), 'utf8');
+        compilation.emitAsset(WXS_FILENAME, new RawSource(wxsContent));
+    }
+}

package/dist/plugin/entry-rename.mjs

@@ -0,0 +1,78 @@
+/* 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/dist/plugin/expose-entry-bk.mjs

@@ -0,0 +1,63 @@
+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 ------------
+                    entryModule.request && // @ts-expect-error ------------
+                        slash(entryModule.request) === slash(module.request)) {
+                        return name;
+                    }
+                    if (
+                    // @ts-expect-error ------------
+                    entryModule?.resource && // @ts-expect-error ------------
+                        slash(entryModule?.resource) === slash(module.resource)) {
+                        return name;
+                    }
+                }
+            }
+        }
+        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 }, } = compiler.webpack;
+        compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+            compilation.hooks.assetPath.tap(PLUGIN_NAME, (path, pathData) => {
+                if (path.includes('[entry]')) {
+                    const entryName = this.getEntryNameFromPathData(compilation, pathData);
+                    return entryName
+                        ? path.replaceAll('[entry]', entryName)
+                        : path.replaceAll('[entry]', '[hash:8]');
+                }
+                return path;
+            });
+            getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, module) => {
+                Object.defineProperty(loaderContext, 'entryName', {
+                    enumerable: true,
+                    configurable: false,
+                    get: () => {
+                        return this.getEntryNameFromEntries(compilation, module);
+                    },
+                });
+            });
+        });
+    }
+}

package/dist/plugin/expose-entry.mjs

@@ -0,0 +1,79 @@
+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 ------------
+                    entryModule.request && // @ts-expect-error ------------
+                        slash(entryModule.request) === slash(module.request)) {
+                        return name;
+                    }
+                    if (
+                    // @ts-expect-error ------------
+                    entryModule?.resource && // @ts-expect-error ------------
+                        slash(entryModule?.resource) === slash(module.resource)) {
+                        return name;
+                    }
+                }
+            }
+        }
+        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 }, } = compiler.webpack;
+        compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+            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(PLUGIN_NAME, (loaderContext, module) => {
+                Object.defineProperty(loaderContext, 'entryName', {
+                    enumerable: true,
+                    configurable: false,
+                    get: () => {
+                        return this.getEntryNameFromEntries(compilation, module);
+                    },
+                });
+            });
+        });
+    }
+}

package/dist/plugin/mina-runtime.mjs

@@ -0,0 +1,38 @@
+import { dirname, relative, sep } from 'node:path';
+const PLUGIN_NAME = 'MinaRuntimeWebpackPlugin';
+export class MinaRuntimeWebpackPlugin {
+    // 格式化依赖路径为require语句
+    #formatRequire = (from, to) => `require('./${relative(dirname(from), to).split(sep).join('/')}');\n`;
+    // 收集并生成所有依赖的require语句
+    #generateDependencies = (chunk) => {
+        if (!chunk?.name) {
+            return '';
+        }
+        let result = '';
+        for (const { chunks } of chunk.groupsIterable) {
+            for (const depChunk of chunks) {
+                if (depChunk !== chunk && depChunk.name) {
+                    result += this.#formatRequire(chunk.name, depChunk.name);
+                }
+            }
+        }
+        return result;
+    };
+    apply(compiler) {
+        compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+            const { javascript: { JavascriptModulesPlugin }, sources: { ConcatSource }, } = compiler.webpack;
+            JavascriptModulesPlugin.getCompilationHooks(compilation).renderChunk.tap(PLUGIN_NAME, (source, { chunk }) => {
+                if (!chunk ||
+                    !compilation.chunkGraph.getNumberOfEntryModules(chunk)) {
+                    // 跳过非入口模块
+                    return source;
+                }
+                const deps = this.#generateDependencies(chunk);
+                if (!deps) {
+                    return source;
+                }
+                return new ConcatSource(deps, source);
+            });
+        });
+    }
+}

package/dist/plugin/sfc-split.mjs

@@ -0,0 +1,74 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import path from 'node:path';
+import { parse } from '@into-mini/sfc-transformer/src/index.mjs';
+import slash from 'slash';
+import VirtualModulesPlugin from 'webpack-virtual-modules';
+export class SfcSplitPluginBase extends VirtualModulesPlugin {
+    PLUGIN_NAME = 'SfcSplitPluginBase';
+    tagMatcher;
+    preserveTap;
+    constructor({ tagMatcher, preserveTap }) {
+        super();
+        this.tagMatcher = tagMatcher;
+        this.preserveTap = preserveTap;
+    }
+    apply(compiler) {
+        this.#expose(compiler);
+        super.apply(compiler);
+    }
+    #expose(compiler) {
+        const { PLUGIN_NAME } = this;
+        const { NormalModule: { getCompilationHooks }, } = compiler.webpack;
+        compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+            getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext) => {
+                Object.defineProperty(loaderContext, 'processSfcFile', {
+                    enumerable: true,
+                    configurable: false,
+                    value: (options) => {
+                        return this.#processSfcFile(options);
+                    },
+                });
+            });
+        });
+    }
+    #inject(resourcePath, ext, content) {
+        const src = path.resolve(resourcePath.replace(/\.vue$/, ext));
+        super.writeModule(src, content);
+        return src;
+    }
+    #injectStyle(resourcePath, id, style) {
+        return this.#inject(resourcePath, `-${id}.${style.lang ?? 'css'}`, style.content);
+    }
+    #injectStyles(resourcePath, styles) {
+        const io = [];
+        const css = styles?.length > 0 ? styles : [];
+        css.forEach((style, idx) => {
+            if (style?.content) {
+                const src = this.#injectStyle(resourcePath, idx, style);
+                io.push(src);
+            }
+        });
+        return io;
+    }
+    #injectTemplate(resourcePath, tpl) {
+        return this.#inject(resourcePath, '.wxml', tpl);
+    }
+    #processSfcFile({ source, resourcePath }) {
+        const { tagMatcher, preserveTap } = this;
+        const { tpl, styles, code, config } = parse(source, {
+            tagMatcher,
+            preserveTap,
+        });
+        const paths = [];
+        const wxml = this.#injectTemplate(resourcePath, tpl);
+        paths.push(wxml);
+        const css = this.#injectStyles(resourcePath, styles);
+        paths.push(...css);
+        return {
+            config,
+            paths: paths.map((src) => slash(src)),
+            script: code,
+        };
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@into-mini/sfc-split-plugin",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "license": "MIT",
   "keywords": [
     "loader",
@@ -22,10 +22,9 @@
   "bugs": {
     "url": "https://github.com/into-mini/into-mini/issues"
   },
-  "main": "plugin.mjs",
+  "main": "dist/index.mjs",
   "files": [
-    "**/*.json",
-    "**/*.mjs"
+    "dist"
   ],
   "type": "module",
   "dependencies": {
@@ -33,13 +32,12 @@
     "webpack-virtual-modules": "^0.6.2",
     "yaml": "^2.8.2",
     "@into-mini/clsx": "^0.1.0",
-    "@into-mini/sfc-transformer": "^0.5.12",
-    "@into-mini/sfc-split-loader": "^0.0.0",
-    "@into-mini/wxml-loader": "^0.0.0"
+    "@into-mini/sfc-transformer": "^0.6.0",
+    "@into-mini/wxml-loader": "^0.0.0",
+    "@into-mini/sfc-split-loader": "^0.2.0"
   },
   "peerDependencies": {
     "@babel/core": "^7.28.5",
-    "mini-css-extract-plugin": "^2.9.4",
     "webpack": "^5.103.0"
   },
   "engines": {
@@ -48,5 +46,6 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
-  }
+  },
+  "scripts": {}
 }

package/helper/empty.json

@@ -1 +0,0 @@
-{}

package/helper/transform.mjs

@@ -1,39 +0,0 @@
-// @ts-expect-error -------------------
-import babel from '@babel/core';
-
-export function transformJS(input, absoluteFrom) {
-  const minified = process.env.NODE_ENV === 'production';
-
-  if (!absoluteFrom.endsWith('.js')) {
-    return input;
-  }
-
-  const result = babel.transformSync(input, {
-    presets: [
-      [
-        'babel-preset-evergreen',
-        {
-          usage: 'pure',
-          mini: true,
-        },
-      ],
-    ],
-    plugins: [
-      ['@babel/plugin-transform-modules-commonjs', { importInterop: 'none' }],
-    ],
-    targets: 'ios 12, chrome 86',
-    configFile: false,
-    babelrc: false,
-    filename: 'a.mjs',
-    sourceType: 'commonjs',
-    compact: !minified,
-    retainLines: !minified,
-    envName: process.env.NODE_ENV,
-    minified,
-  });
-
-  return (result?.code || input).replace(
-    ';Object.defineProperty(exports,"__esModule",{value:true});',
-    ';',
-  );
-}