feat: redirect imports

packages/ice/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v3.0.1
+
+- [feat] redirect imports for data loader
+
 ## v3.0.0
 
 - [feat] provider basic service for web framework `ice`

packages/ice/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/app",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "provide scripts and configuration used by web framework ice",
   "type": "module",
   "main": "./esm/index.js",

packages/ice/src/service/serverCompiler.ts

@@ -53,6 +53,7 @@ export function createServerCompiler(options: Options) {
     externalDependencies,
     transformEnv = true,
     assetsManifest,
+    redirectImports,
   } = {}) => {
     let depsMetadata: DepsMetaData;
     let swcOptions = merge({}, {
@@ -70,6 +71,7 @@ export function createServerCompiler(options: Options) {
       env: false,
       polyfill: false,
       swcOptions,
+      redirectImports,
     }, 'esbuild');
 
     if (preBundle) {

packages/ice/src/types/plugin.ts

@@ -38,6 +38,7 @@ export type ServerCompiler = (
     externalDependencies?: boolean;
     transformEnv?: boolean;
     assetsManifest?: AssetsManifest;
+    redirectImports?: Config['redirectImports'];
   }
 ) => Promise<Partial<BuildResult & { serverEntry: string; error: any }>>;
 export type WatchEvent = [

packages/ice/src/webpack/DataLoaderPlugin.ts

@@ -67,6 +67,11 @@ export default class DataLoaderPlugin {
               preBundle: false,
               externalDependencies: false,
               transformEnv: false,
+              // Redirect import defineDataLoader from @ice/runtime to avoid build plugin side effect code.
+              redirectImports: [{
+                specifier: ['defineDataLoader'],
+                source: '@ice/runtime',
+              }],
             },
           );
           if (error) {

packages/webpack-config/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v3.0.1
+
+- [feat] support redirect imports
+
 ## v3.0.0
 
 - [feat] basic webpack configuration

packages/webpack-config/src/getCompilerPlugins.ts

@@ -4,6 +4,7 @@ import type { UnpluginOptions } from '@ice/bundles/compiled/unplugin/index.js';
 import type { Configuration } from 'webpack';
 import type { Config } from './types.js';
 import compilationPlugin from './unPlugins/compilation.js';
+import redirectImportPlugin from './unPlugins/redirectImport.js';
 import compileExcludes from './compileExcludes.js';
 
 type Compiler = 'webpack' | 'esbuild';
@@ -40,6 +41,7 @@ function getCompilerPlugins(config: Config, compiler: Compiler) {
     mode,
     compileIncludes,
     swcOptions,
+    redirectImports,
     fastRefresh,
     cacheDir,
     polyfill,
@@ -52,6 +54,14 @@ function getCompilerPlugins(config: Config, compiler: Compiler) {
     ...(transformPlugins.filter(({ enforce }) => !enforce || enforce === 'pre') || []),
     ...transforms.map((transform, index) => ({ name: `transform_${index}`, transform, transformInclude })),
   );
+
+  if (redirectImports) {
+    compilerPlugins.push(redirectImportPlugin({
+      sourceMap,
+      exportData: redirectImports,
+    }));
+  }
+
   // Use webpack loader instead of webpack plugin to do the compilation.
   // Reason: https://github.com/unjs/unplugin/issues/154
   if (swcOptions && compiler !== 'webpack') {

packages/webpack-config/src/types.ts

@@ -44,6 +44,13 @@ interface SwcOptions {
   getRoutePaths?: Function;
 }
 
+interface ImportDeclaration {
+  specifier: string | string[];
+  source: string;
+  type?: boolean;
+  alias?: Record<string, string>;
+}
+
 type Output = Configuration['output'];
 type Optimization = Configuration['optimization'];
 type Performance = Configuration['performance'];
@@ -135,6 +142,8 @@ export interface Config {
 
   swcOptions?: SwcOptions;
 
+  redirectImports?: ImportDeclaration[];
+
   entry?: {
     [key: string]: string;
   };

tests/integration/with-store.test.ts

@@ -1,3 +1,5 @@
+import * as path from 'path';
+import * as fs from 'fs';
 import { expect, test, describe, afterAll } from 'vitest';
 import { buildFixture, setupBrowser } from '../utils/build';
 import type { Page } from '../utils/browser';
@@ -17,6 +19,16 @@ describe(`build ${example}`, () => {
     await page.waitForFunction('document.getElementsByTagName(\'button\').length > 0');
     expect(await page.$$text('#username')).toStrictEqual(['name: icejs']);
     expect(await page.$$text('#count')).toStrictEqual(['0']);
+
+    const dataLoaderPath = path.join(__dirname, `../../examples/${example}/build/js/data-loader.js`);
+
+    // should not contain react
+    const dataLoaderContent = fs.readFileSync(dataLoaderPath, 'utf-8');
+    expect(dataLoaderContent.includes('createElement')).toBe(false);
+
+    // size of data loader should be less than 14kib
+    const stats = fs.statSync(dataLoaderPath);
+    expect(stats.size).toBeLessThan(1024 * 14);
   }, 120000);
 
   afterAll(async () => {