@unpackjs/plugin-react 3.4.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +161 -159
  2. package/dist-types/index.d.ts +1 -4
  3. package/dist-types/index.d.ts.map +1 -1
  4. package/package.json +4 -4
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import __rslib_shim_module__ from 'module';
1
+ import __rslib_shim_module__ from "node:module";
2
2
  let require = __rslib_shim_module__.createRequire(import.meta.url);
3
3
  import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
4
4
  import node_path, { dirname as __rspack_dirname } from "node:path";
@@ -6,177 +6,179 @@ import node_fs from "node:fs";
6
6
  import plugin_react_refresh from "@rspack/plugin-react-refresh";
7
7
  import { JSX_REGEX, JS_REGEX, SCRIPT_REGEX, esVersionToBrowserslist, getHtmlTemplateOrContent, getPathInJs, injectToHead, isDevServer, isFunction, isPlainObject, launchEditor, mergeConfig as core_mergeConfig, removeDir, rspack } from "@unpackjs/core";
8
8
  var src_dirname = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
9
- let pluginReact = (options = {})=>{
10
- let { clickToComponent } = options;
11
- return {
12
- name: 'unpack:react',
13
- bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig, cachePath })=>{
14
- let config = originalConfig;
15
- unpackConfig.mpa && (config = (({ config, unpackConfig, cachePath })=>{
16
- let entry, html, pagesRoot, tempDirectory = node_path.join(cachePath, 'mpa'), userOptions = isPlainObject(unpackConfig.mpa) ? unpackConfig.mpa : {}, { template, templateContent } = getHtmlTemplateOrContent(unpackConfig.html?.template, unpackConfig.root), { entry: entry1, html: html1 } = (entry = {}, html = [], pagesRoot = node_path.join(unpackConfig.root, 'src', 'pages'), node_fs.readdirSync(pagesRoot).forEach((filename)=>{
17
- if (filename.startsWith('.')) return;
18
- let indexFilePath = ((dir)=>{
19
- for (let extension of [
20
- '.tsx',
21
- '.jsx'
22
- ]){
23
- let indexFilePath = node_path.join(dir, `index${extension}`);
24
- if (node_fs.existsSync(indexFilePath)) return indexFilePath;
25
- }
26
- return null;
27
- })(node_path.join(pagesRoot, filename));
28
- if (indexFilePath) {
29
- let entryName = !0 === userOptions.lowerCase ? filename.toLowerCase() : filename;
30
- entry[entryName] = {
31
- import: [
32
- indexFilePath
33
- ]
34
- }, html.push({
35
- filename: `${entryName}.html`,
36
- chunks: [
37
- entryName
38
- ],
39
- templateParameters: {
40
- mountId: unpackConfig.html?.mountId || '',
41
- title: isFunction(unpackConfig.html?.title) ? unpackConfig.html?.title({
42
- entryName
43
- }) : unpackConfig.html?.title || '',
44
- headTag: unpackConfig.html?.headTag || '',
45
- ...unpackConfig.html?.templateParameters
9
+ let pluginReact = ()=>[
10
+ {
11
+ name: 'unpack:react',
12
+ bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig, cachePath })=>{
13
+ let config = originalConfig;
14
+ unpackConfig.mpa && (config = (({ config, unpackConfig, cachePath })=>{
15
+ let entry, html, pagesRoot, tempDirectory = node_path.join(cachePath, 'mpa'), userOptions = isPlainObject(unpackConfig.mpa) ? unpackConfig.mpa : {}, { template, templateContent } = getHtmlTemplateOrContent(unpackConfig.html?.template, unpackConfig.root), { entry: entry1, html: html1 } = (entry = {}, html = [], pagesRoot = node_path.join(unpackConfig.root, 'src', 'pages'), node_fs.readdirSync(pagesRoot).forEach((filename)=>{
16
+ if (filename.startsWith('.')) return;
17
+ let indexFilePath = ((dir)=>{
18
+ for (let extension of [
19
+ '.tsx',
20
+ '.jsx'
21
+ ]){
22
+ let indexFilePath = node_path.join(dir, `index${extension}`);
23
+ if (node_fs.existsSync(indexFilePath)) return indexFilePath;
46
24
  }
47
- });
48
- }
49
- }), {
50
- entry,
51
- html
52
- });
53
- return core_mergeConfig(config, {
54
- entry: ((entry)=>{
55
- let root = unpackConfig.root;
56
- removeDir(node_path.join(root, tempDirectory));
57
- let globalImport = userOptions.globalImport?.reduce((acc, curr)=>`${acc}\nimport '${getPathInJs(node_path.resolve(root, curr))}'`, '') || '', { layout } = userOptions, layoutImport = layout ? `import Layout from '${getPathInJs(node_path.resolve(root, layout))}'` : '', layoutJSX = layout ? '<Layout><App /></Layout>' : '<App />', rootElement = `document.getElementById('${unpackConfig.html?.mountId}')`, renderer = `ReactDOM.createRoot(${rootElement}).render(${layoutJSX})`;
58
- return Object.entries(entry).forEach(([entryName, entryConfig])=>{
59
- let filePath = node_path.join(root, tempDirectory, `${entryName}.jsx`), tpl = `
25
+ return null;
26
+ })(node_path.join(pagesRoot, filename));
27
+ if (indexFilePath) {
28
+ let entryName = !0 === userOptions.lowerCase ? filename.toLowerCase() : filename;
29
+ entry[entryName] = {
30
+ import: [
31
+ indexFilePath
32
+ ]
33
+ }, html.push({
34
+ filename: `${entryName}.html`,
35
+ chunks: [
36
+ entryName
37
+ ],
38
+ templateParameters: {
39
+ mountId: unpackConfig.html?.mountId || '',
40
+ title: isFunction(unpackConfig.html?.title) ? unpackConfig.html?.title({
41
+ entryName
42
+ }) : unpackConfig.html?.title || '',
43
+ headTag: unpackConfig.html?.headTag || '',
44
+ ...unpackConfig.html?.templateParameters
45
+ }
46
+ });
47
+ }
48
+ }), {
49
+ entry,
50
+ html
51
+ });
52
+ return core_mergeConfig(config, {
53
+ entry: ((entry)=>{
54
+ let root = unpackConfig.root;
55
+ removeDir(node_path.join(root, tempDirectory));
56
+ let globalImport = userOptions.globalImport?.reduce((acc, curr)=>`${acc}\nimport '${getPathInJs(node_path.resolve(root, curr))}'`, '') || '', { layout } = userOptions, layoutImport = layout ? `import Layout from '${getPathInJs(node_path.resolve(root, layout))}'` : '', layoutJSX = layout ? '<Layout><App /></Layout>' : '<App />', rootElement = `document.getElementById('${unpackConfig.html?.mountId}')`, renderer = `ReactDOM.createRoot(${rootElement}).render(${layoutJSX})`;
57
+ return Object.entries(entry).forEach(([entryName, entryConfig])=>{
58
+ let filePath = node_path.join(root, tempDirectory, `${entryName}.jsx`), tpl = `
60
59
  import React from 'react'
61
60
  import ReactDOM from 'react-dom/client'
62
61
  import App from '${getPathInJs(entryConfig.import[0])}'${layoutImport && `\n${layoutImport}`}
63
62
  ${globalImport}
64
63
  ${renderer}
65
64
  `, dir = node_path.dirname(filePath);
66
- node_fs.existsSync(dir) || node_fs.mkdirSync(dir, {
67
- recursive: !0
68
- }), node_fs.writeFileSync(filePath, tpl, 'utf-8'), entryConfig.import[0] = filePath;
69
- }), entry;
70
- })(entry1),
71
- plugins: html1.map((h)=>new rspack.HtmlRspackPlugin({
72
- ...h,
73
- template,
74
- templateContent,
75
- minify: !1
76
- }))
77
- });
78
- })({
79
- config,
80
- unpackConfig,
81
- cachePath
82
- }));
83
- let jsExclude = [
84
- /node_modules[\\/](?!\.unpack)/
85
- ], getSwcOptions = ({ tsx })=>({
86
- jsc: {
87
- parser: {
88
- tsx,
89
- syntax: "typescript",
90
- dynamicImport: !0,
91
- decorators: !0
92
- },
93
- externalHelpers: !0,
94
- transform: {
95
- react: {
96
- runtime: 'automatic',
97
- refresh: isDevServer()
98
- }
99
- }
100
- },
101
- env: {
102
- targets: esVersionToBrowserslist(unpackConfig.build.target)
103
- }
104
- });
105
- return mergeConfig(config, {
106
- module: {
107
- rules: [
108
- {
109
- test: JS_REGEX,
110
- exclude: jsExclude,
111
- use: [
112
- {
113
- loader: 'builtin:swc-loader',
114
- options: getSwcOptions({
115
- tsx: !1
116
- })
117
- }
118
- ]
119
- },
120
- {
121
- test: JSX_REGEX,
122
- exclude: jsExclude,
123
- use: [
124
- {
125
- loader: 'builtin:swc-loader',
126
- options: getSwcOptions({
127
- tsx: !0
128
- })
65
+ node_fs.existsSync(dir) || node_fs.mkdirSync(dir, {
66
+ recursive: !0
67
+ }), node_fs.writeFileSync(filePath, tpl, 'utf-8'), entryConfig.import[0] = filePath;
68
+ }), entry;
69
+ })(entry1),
70
+ plugins: html1.map((h)=>new rspack.HtmlRspackPlugin({
71
+ ...h,
72
+ template,
73
+ templateContent,
74
+ minify: !1
75
+ }))
76
+ });
77
+ })({
78
+ config,
79
+ unpackConfig,
80
+ cachePath
81
+ }));
82
+ let jsExclude = [
83
+ /node_modules[\\/](?!\.unpack)/
84
+ ], getSwcOptions = ({ tsx })=>({
85
+ jsc: {
86
+ parser: {
87
+ tsx,
88
+ syntax: "typescript",
89
+ dynamicImport: !0,
90
+ decorators: !0
91
+ },
92
+ externalHelpers: !0,
93
+ transform: {
94
+ react: {
95
+ runtime: 'automatic',
96
+ refresh: isDevServer()
129
97
  }
130
- ]
131
- },
132
- {
133
- test: /\.svg$/i,
134
- type: 'asset',
135
- resourceQuery: /url/
98
+ }
136
99
  },
137
- {
138
- test: /\.svg$/i,
139
- issuer: SCRIPT_REGEX,
140
- resourceQuery: {
141
- not: [
142
- /url/
100
+ env: {
101
+ targets: esVersionToBrowserslist(unpackConfig.build.target)
102
+ }
103
+ });
104
+ return mergeConfig(config, {
105
+ module: {
106
+ rules: [
107
+ {
108
+ test: JS_REGEX,
109
+ exclude: jsExclude,
110
+ use: [
111
+ {
112
+ loader: 'builtin:swc-loader',
113
+ options: getSwcOptions({
114
+ tsx: !1
115
+ })
116
+ }
117
+ ]
118
+ },
119
+ {
120
+ test: JSX_REGEX,
121
+ exclude: jsExclude,
122
+ use: [
123
+ {
124
+ loader: 'builtin:swc-loader',
125
+ options: getSwcOptions({
126
+ tsx: !0
127
+ })
128
+ }
143
129
  ]
144
130
  },
145
- use: [
146
- require.resolve('@svgr/webpack')
147
- ]
131
+ {
132
+ test: /\.svg$/i,
133
+ type: 'asset',
134
+ resourceQuery: /url/
135
+ },
136
+ {
137
+ test: /\.svg$/i,
138
+ issuer: SCRIPT_REGEX,
139
+ resourceQuery: {
140
+ not: [
141
+ /url/
142
+ ]
143
+ },
144
+ use: [
145
+ require.resolve('@svgr/webpack')
146
+ ]
147
+ }
148
+ ]
149
+ },
150
+ plugins: [
151
+ isDevServer() && new plugin_react_refresh({
152
+ overlay: !1
153
+ })
154
+ ].filter(Boolean),
155
+ resolve: {
156
+ alias: {
157
+ '@swc/helpers': node_path.dirname(require.resolve('@swc/helpers/package.json'))
148
158
  }
149
- ]
150
- },
151
- plugins: [
152
- isDevServer() && new plugin_react_refresh({
153
- overlay: !1
154
- })
155
- ].filter(Boolean),
156
- resolve: {
157
- alias: {
158
- '@swc/helpers': node_path.dirname(require.resolve('@swc/helpers/package.json'))
159
159
  }
160
- }
161
- });
160
+ });
161
+ }
162
162
  },
163
- setupMiddlewares: (middlewares)=>isDevServer() && clickToComponent ? [
164
- (req, res, next)=>{
165
- if (!req.url) return void next();
166
- let url = new URL(req.url, 'http://localhost');
167
- if ('/__click_to_component__' !== url.pathname) return void next();
168
- let file = url.searchParams.get('file'), line = Number(url.searchParams.get('line')), column = Number(url.searchParams.get('column'));
169
- res.writeHead(200, {
170
- 'Content-Type': 'text/plain'
171
- }), res.end('ok'), launchEditor(`${decodeURIComponent(file)}:${line}:${column}`);
172
- },
173
- ...middlewares
174
- ] : middlewares,
175
- transformHtml: (html)=>{
176
- if (!isDevServer() || !clickToComponent) return html;
177
- let injectScriptPath = node_path.resolve(src_dirname, 'injectScript.js'), injectScript = node_fs.readFileSync(injectScriptPath, 'utf-8');
178
- return injectToHead(html, `<script>${injectScript}</script>`);
163
+ {
164
+ name: 'unpack:react:click-to-component',
165
+ apply: 'dev',
166
+ setupMiddlewares: (middlewares)=>[
167
+ (req, res, next)=>{
168
+ if (!req.url) return void next();
169
+ let url = new URL(req.url, 'http://localhost');
170
+ if ('/__click_to_component__' !== url.pathname) return void next();
171
+ let file = url.searchParams.get('file'), line = Number(url.searchParams.get('line')), column = Number(url.searchParams.get('column'));
172
+ res.writeHead(200, {
173
+ 'Content-Type': 'text/plain'
174
+ }), res.end('ok'), launchEditor(`${decodeURIComponent(file)}:${line}:${column}`);
175
+ },
176
+ ...middlewares
177
+ ],
178
+ transformHtml: (html)=>{
179
+ let injectScriptPath = node_path.resolve(src_dirname, 'injectScript.js'), injectScript = node_fs.readFileSync(injectScriptPath, 'utf-8');
180
+ return injectToHead(html, `<script>${injectScript}</script>`);
181
+ }
179
182
  }
180
- };
181
- };
183
+ ];
182
184
  export { pluginReact };
package/dist-types/index.d.ts CHANGED
@@ -1,6 +1,3 @@
1
1
  import { type UnpackPlugin } from '@unpackjs/core';
2
- export type PluginReactOptions = {
3
- clickToComponent?: boolean;
4
- };
5
- export declare const pluginReact: (options?: PluginReactOptions) => UnpackPlugin;
2
+ export declare const pluginReact: () => UnpackPlugin[];
6
3
  //# sourceMappingURL=index.d.ts.map
package/dist-types/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAQL,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AAGvB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,WAAW,GAAI,UAAS,kBAAuB,KAAG,YAkH9D,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAQL,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AAGvB,eAAO,MAAM,WAAW,QAAO,YAAY,EAqH1C,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unpackjs/plugin-react",
3
- "version": "3.4.0",
3
+ "version": "4.1.0",
4
4
  "description": "React plugin for Unpack",
5
5
  "type": "module",
6
6
  "exports": {
@@ -22,16 +22,16 @@
22
22
  "access": "public"
23
23
  },
24
24
  "dependencies": {
25
- "@rspack/plugin-react-refresh": "1.5.3",
25
+ "@rspack/plugin-react-refresh": "1.6.0",
26
26
  "@svgr/webpack": "8.1.0",
27
27
  "@swc/helpers": "0.5.18",
28
28
  "react-refresh": "0.18.0"
29
29
  },
30
30
  "devDependencies": {
31
- "@unpackjs/core": "3.8.0"
31
+ "@unpackjs/core": "4.1.0"
32
32
  },
33
33
  "peerDependencies": {
34
- "@unpackjs/core": "3.x"
34
+ "@unpackjs/core": "4.x"
35
35
  },
36
36
  "scripts": {
37
37
  "dev": "rslib build --watch",