@unpackjs/plugin-react 4.0.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 +160 -155
  2. package/dist-types/index.d.ts +1 -1
  3. package/dist-types/index.d.ts.map +1 -1
  4. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -6,174 +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 = ()=>({
10
- name: 'unpack:react',
11
- bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig, cachePath })=>{
12
- let config = originalConfig;
13
- unpackConfig.mpa && (config = (({ config, unpackConfig, cachePath })=>{
14
- 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)=>{
15
- if (filename.startsWith('.')) return;
16
- let indexFilePath = ((dir)=>{
17
- for (let extension of [
18
- '.tsx',
19
- '.jsx'
20
- ]){
21
- let indexFilePath = node_path.join(dir, `index${extension}`);
22
- if (node_fs.existsSync(indexFilePath)) return indexFilePath;
23
- }
24
- return null;
25
- })(node_path.join(pagesRoot, filename));
26
- if (indexFilePath) {
27
- let entryName = !0 === userOptions.lowerCase ? filename.toLowerCase() : filename;
28
- entry[entryName] = {
29
- import: [
30
- indexFilePath
31
- ]
32
- }, html.push({
33
- filename: `${entryName}.html`,
34
- chunks: [
35
- entryName
36
- ],
37
- templateParameters: {
38
- mountId: unpackConfig.html?.mountId || '',
39
- title: isFunction(unpackConfig.html?.title) ? unpackConfig.html?.title({
40
- entryName
41
- }) : unpackConfig.html?.title || '',
42
- headTag: unpackConfig.html?.headTag || '',
43
- ...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;
44
24
  }
45
- });
46
- }
47
- }), {
48
- entry,
49
- html
50
- });
51
- return core_mergeConfig(config, {
52
- entry: ((entry)=>{
53
- let root = unpackConfig.root;
54
- removeDir(node_path.join(root, tempDirectory));
55
- 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})`;
56
- return Object.entries(entry).forEach(([entryName, entryConfig])=>{
57
- 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 = `
58
59
  import React from 'react'
59
60
  import ReactDOM from 'react-dom/client'
60
61
  import App from '${getPathInJs(entryConfig.import[0])}'${layoutImport && `\n${layoutImport}`}
61
62
  ${globalImport}
62
63
  ${renderer}
63
64
  `, dir = node_path.dirname(filePath);
64
- node_fs.existsSync(dir) || node_fs.mkdirSync(dir, {
65
- recursive: !0
66
- }), node_fs.writeFileSync(filePath, tpl, 'utf-8'), entryConfig.import[0] = filePath;
67
- }), entry;
68
- })(entry1),
69
- plugins: html1.map((h)=>new rspack.HtmlRspackPlugin({
70
- ...h,
71
- template,
72
- templateContent,
73
- minify: !1
74
- }))
75
- });
76
- })({
77
- config,
78
- unpackConfig,
79
- cachePath
80
- }));
81
- let jsExclude = [
82
- /node_modules[\\/](?!\.unpack)/
83
- ], getSwcOptions = ({ tsx })=>({
84
- jsc: {
85
- parser: {
86
- tsx,
87
- syntax: "typescript",
88
- dynamicImport: !0,
89
- decorators: !0
90
- },
91
- externalHelpers: !0,
92
- transform: {
93
- react: {
94
- runtime: 'automatic',
95
- refresh: isDevServer()
96
- }
97
- }
98
- },
99
- env: {
100
- targets: esVersionToBrowserslist(unpackConfig.build.target)
101
- }
102
- });
103
- return mergeConfig(config, {
104
- module: {
105
- rules: [
106
- {
107
- test: JS_REGEX,
108
- exclude: jsExclude,
109
- use: [
110
- {
111
- loader: 'builtin:swc-loader',
112
- options: getSwcOptions({
113
- tsx: !1
114
- })
115
- }
116
- ]
117
- },
118
- {
119
- test: JSX_REGEX,
120
- exclude: jsExclude,
121
- use: [
122
- {
123
- loader: 'builtin:swc-loader',
124
- options: getSwcOptions({
125
- tsx: !0
126
- })
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()
127
97
  }
128
- ]
129
- },
130
- {
131
- test: /\.svg$/i,
132
- type: 'asset',
133
- resourceQuery: /url/
98
+ }
134
99
  },
135
- {
136
- test: /\.svg$/i,
137
- issuer: SCRIPT_REGEX,
138
- resourceQuery: {
139
- not: [
140
- /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
+ }
141
129
  ]
142
130
  },
143
- use: [
144
- require.resolve('@svgr/webpack')
145
- ]
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'))
146
158
  }
147
- ]
148
- },
149
- plugins: [
150
- isDevServer() && new plugin_react_refresh({
151
- overlay: !1
152
- })
153
- ].filter(Boolean),
154
- resolve: {
155
- alias: {
156
- '@swc/helpers': node_path.dirname(require.resolve('@swc/helpers/package.json'))
157
159
  }
158
- }
159
- });
160
+ });
161
+ }
160
162
  },
161
- setupMiddlewares: (middlewares)=>isDevServer() ? [
162
- (req, res, next)=>{
163
- if (!req.url) return void next();
164
- let url = new URL(req.url, 'http://localhost');
165
- if ('/__click_to_component__' !== url.pathname) return void next();
166
- let file = url.searchParams.get('file'), line = Number(url.searchParams.get('line')), column = Number(url.searchParams.get('column'));
167
- res.writeHead(200, {
168
- 'Content-Type': 'text/plain'
169
- }), res.end('ok'), launchEditor(`${decodeURIComponent(file)}:${line}:${column}`);
170
- },
171
- ...middlewares
172
- ] : middlewares,
173
- transformHtml: (html)=>{
174
- if (!isDevServer()) return html;
175
- let injectScriptPath = node_path.resolve(src_dirname, 'injectScript.js'), injectScript = node_fs.readFileSync(injectScriptPath, 'utf-8');
176
- 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
+ }
177
182
  }
178
- });
183
+ ];
179
184
  export { pluginReact };
package/dist-types/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { type UnpackPlugin } from '@unpackjs/core';
2
- export declare const pluginReact: () => UnpackPlugin;
2
+ export declare const pluginReact: () => UnpackPlugin[];
3
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,eAAO,MAAM,WAAW,QAAO,YAiH9B,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": "4.0.0",
3
+ "version": "4.1.0",
4
4
  "description": "React plugin for Unpack",
5
5
  "type": "module",
6
6
  "exports": {
@@ -28,7 +28,7 @@
28
28
  "react-refresh": "0.18.0"
29
29
  },
30
30
  "devDependencies": {
31
- "@unpackjs/core": "4.0.0"
31
+ "@unpackjs/core": "4.1.0"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "@unpackjs/core": "4.x"