From c68d2e1608239d7d8976429b681f365ccbfbf6ac Mon Sep 17 00:00:00 2001 From: ryoppippi <1560508+ryoppippi@users.noreply.github.com> Date: Thu, 19 Sep 2024 00:02:57 +0100 Subject: [PATCH 1/3] feat(examples/webpack): simplify webpack config --- examples/webpack-minimal/webpack.config.ts | 88 ++++++++++------------ 1 file changed, 39 insertions(+), 49 deletions(-) diff --git a/examples/webpack-minimal/webpack.config.ts b/examples/webpack-minimal/webpack.config.ts index 3fd650a0..002dead7 100644 --- a/examples/webpack-minimal/webpack.config.ts +++ b/examples/webpack-minimal/webpack.config.ts @@ -11,55 +11,45 @@ const {default: UnpluginTypia} = tsx.require('../../packages/unplugin-typia/src const isProduction = process.env.NODE_ENV == 'production'; -const config: Configuration = { - entry: './src/index.ts', - output: { - path: path.resolve(__dirname, 'dist'), - }, - devServer: { - open: true, - host: 'localhost', - }, - plugins: [ - new HtmlWebpackPlugin({ - template: 'index.html', - }), - UnpluginTypia() - // Add your plugins here - // Learn more about plugins from https://webpack.js.org/configuration/plugins/ - ], - module: { - rules: [ - { - test: /\.(ts|tsx)$/i, - loader: 'ts-loader', - exclude: ['/node_modules/'], - }, - { - test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', - }, - - // Add your rules for custom modules here - // Learn more about loaders from https://webpack.js.org/loaders/ +module.exports = () => { + return { + mode: isProduction ? 'production' : 'development', + entry: './src/index.ts', + output: { + path: path.resolve(__dirname, 'dist'), + }, + devServer: { + open: true, + host: 'localhost', + }, + plugins: [ + new HtmlWebpackPlugin({ + template: 'index.html', + }), + UnpluginTypia(), + isProduction && new WorkboxWebpackPlugin.GenerateSW(), + // Add your plugins here + // Learn more about plugins from https://webpack.js.org/configuration/plugins/ ], - }, - resolve: { - extensions: ['.tsx', '.ts', '.jsx', '.js', '...'], - }, -}; + module: { + rules: [ + { + test: /\.(ts|tsx)$/i, + loader: 'ts-loader', + exclude: ['/node_modules/'], + }, + { + test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, + type: 'asset', + }, -module.exports = () => { - if (isProduction) { - config.mode = 'production'; - - if (config.plugins == null) { - config.plugins = [] - } - config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); - - } else { - config.mode = 'development'; - } - return config; + // Add your rules for custom modules here + // Learn more about loaders from https://webpack.js.org/loaders/ + ], + }, + resolve: { + extensions: ['.tsx', '.ts', '.jsx', '.js', '...'], + }, + } as const satisfies Configuration; }; + From 31d81ef4eaded131df17de69969fe5b33e5519df Mon Sep 17 00:00:00 2001 From: ryoppippi <1560508+ryoppippi@users.noreply.github.com> Date: Thu, 19 Sep 2024 00:10:59 +0100 Subject: [PATCH 2/3] feat(examples/webpack): use dynamic import to load unplugin-typia --- examples/webpack-minimal/webpack.config.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/examples/webpack-minimal/webpack.config.ts b/examples/webpack-minimal/webpack.config.ts index 002dead7..c6fc0514 100644 --- a/examples/webpack-minimal/webpack.config.ts +++ b/examples/webpack-minimal/webpack.config.ts @@ -4,14 +4,15 @@ import path from 'path'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; import { Configuration } from 'webpack'; -import * as tsx from 'tsx/cjs/api' - -const {default: UnpluginTypia} = tsx.require('../../packages/unplugin-typia/src/webpack.ts', __filename) +import { tsImport } from 'tsx/esm/api' const isProduction = process.env.NODE_ENV == 'production'; +module.exports = async () => { + /** we use tsImport because of development. However, in real-world projecct, just use `import` instead */ + // const { default: UnpluginTypia } = await import('@ryoppippi/unplugin-typia/webpack'); + const { default: UnpluginTypia } = await tsImport('@ryoppippi/unplugin-typia/webpack', __dirname); -module.exports = () => { return { mode: isProduction ? 'production' : 'development', entry: './src/index.ts', From 34d17703b1f5e5977923a5c7ab0baca441bb044c Mon Sep 17 00:00:00 2001 From: ryoppippi <1560508+ryoppippi@users.noreply.github.com> Date: Thu, 19 Sep 2024 00:15:50 +0100 Subject: [PATCH 3/3] feat(webpack): fix docs --- packages/unplugin-typia/README.md | 28 ++++++++++---------------- packages/unplugin-typia/src/webpack.ts | 23 ++++++++++----------- 2 files changed, 22 insertions(+), 29 deletions(-) diff --git a/packages/unplugin-typia/README.md b/packages/unplugin-typia/README.md index d6d60949..457381de 100644 --- a/packages/unplugin-typia/README.md +++ b/packages/unplugin-typia/README.md @@ -196,28 +196,22 @@ Examples: > ⚠️ Note: Currently, this plugin works only with 'esm' target. -> If you want to use 'cjs' target on Node < 20.17.0 , please use with [`jiti`](https://github.com/unjs/jiti). -> If you want to use 'cjs' target on Node >= 20.17.0, please use with `require` and enable [`--experimental-require-modules` flag](https://github.com/nodejs/node/pull/51977). -> If you want to use 'esm' target, don't worry! You can use this plugin without any additional setup. +> If you want to use 'cjs', use dynamic import. -```sh -npm install jiti -``` +> If you want to use 'esm' target, don't worry! You can use this plugin without any additional setup. ```js // webpack.config.js -// if you use Node < 20.17.0 -const jiti = require('jiti')(__filename); -const { default: UnpluginTypia } = jiti('@ryoppippi/unplugin-typia/webpack'); - -// if you use Node >= 20.17.0 -// const { default: UnpluginTypia } = require("@ryoppippi/unplugin-typia/webpack"); - -module.exports = { - plugins: [ - UnpluginTypia({ /* options */ }), - ], +module.exports = async () => { + const { default: UnpluginTypia } = await import('@ryoppippi/unplugin-typia/webpack'); + return { + plugins: [ + new UnpluginTypia({ + // options + }), + ], + }; }; ``` diff --git a/packages/unplugin-typia/src/webpack.ts b/packages/unplugin-typia/src/webpack.ts index d1b5ce53..a57ae25a 100644 --- a/packages/unplugin-typia/src/webpack.ts +++ b/packages/unplugin-typia/src/webpack.ts @@ -11,8 +11,7 @@ import unplugin from './core/index.js'; * * Currently, this plugin works only with 'esm' target. * - * If you want to use 'cjs' target on Node < 20.17.0 , please use with [`jiti`](https://github.com/unjs/jiti). - * If you want to use 'cjs' target on Node >= 20.17.0, please use with `require` and enable [`--experimental-require-modules` flag](https://github.com/nodejs/node/pull/51977). + * If you want to use 'cjs' use dynamic import * If you want to use 'esm' target, don't worry! You can use this plugin without any additional setup. * * Refer this issue https://github.com/samchon/typia/issues/1094 @@ -21,16 +20,16 @@ import unplugin from './core/index.js'; * ```js * // webpack.config.js * - * // if you use Node < 20.17.0 - * const jiti = require("jiti")(__filename); - * const { default: UnpluginTypia } = jiti("@ryoppippi/unplugin-typia/webpack"); - * - * // if you use Node >= 20.17.0 - * const { default: UnpluginTypia } = require("@ryoppippi/unplugin-typia/webpack"); - * - * module.exports = { - * plugins: [UnpluginTypia({ /* your config *\/ })], - * } + * module.exports = async () => { + * const { default: UnpluginTypia } = await import('@ryoppippi/unplugin-typia/webpack'); + * return { + * plugins: [ + * new UnpluginTypia({ + * // options + * }), + * ], + * }; + * }; * ``` * */